﻿<!DOCTYPE html>
<html class="no-js" lang="en">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <title>二手房租贷</title>
    <meta name="AdsBot-Google" content="noindex follow" />
    <meta name="description" content="Bery-Real Estate Listing Template">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <!-- Favicon -->
    <link rel="shortcut icon" type="image/x-icon" href="/static/images/favicon.png" />

    <!-- CSS (Font, Vendor, Icon, Plugins & Style CSS files) -->


    <!-- Font CSS -->
    <link rel="preconnect" href="https://fonts.googleapis.com/">
    <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap" rel="stylesheet">

    <!-- Vendor CSS (Bootstrap & Icon Font) -->

    <!-- Plugins CSS (All Plugins Files) -->

    <link rel="stylesheet" href="static/css/swiper-bundle.min.css" />

    <link rel="stylesheet" href="static/css/magnific-popup.css" />

    <link rel="stylesheet" href="static/nice-select.css" />


    <!-- Style CSS -->
    <link rel="stylesheet" href="static/css/style.css" />

</head>


<body class="font-ubuntu text-body text-tiny">
    <div class="overflow-x-hidden">
        <!-- Header start -->

        <header id="sticky-header" class="absolute left-0 top-[15px] lg:top-[30px] xl:top-[45px] w-full z-10">
            <div class="container">
                <div class="grid grid-cols-12">
                    <div class="col-span-12">
                        <div class="flex flex-wrap items-center justify-between">
                            <a href="index.html" class="block">
                                <img class="w-full h-full" src="/static/images/logo/logo.svg" loading="lazy" width="99" height="46" alt="brand logo">
                            </a>
                            <nav class="flex flex-wrap items-center">
                                <ul class="hidden lg:flex flex-wrap items-center font-recoleta text-[16px] xl:text-[18px] leading-none text-black">
                                    <li class="mr-7 xl:mr-[40px] relative group py-[20px]">

                                        <a href="#" class="transition-all hover:text-secondary">主页</a>

                                        <ul class="list-none bg-white drop-shadow-[0px_6px_10px_rgba(0,0,0,0.2)] rounded-[12px] flex flex-wrap flex-col w-[220px] absolute top-[120%] left-1/2 -translate-x-1/2 transition-all
                group-hover:top-[100%] invisible group-hover:visible opacity-0 group-hover:opacity-100
                
                ">
                                            <li class="border-b border-dashed border-primary border-opacity-40 last:border-b-0 hover:border-solid transition-all">
                                                <a href="index.html" class="font-recoleta leading-[1.571] text-[14px] text-primary p-[10px] capitalize block transition-all hover:bg-primary hover:text-white text-center my-[-1px] rounded-t-[12px]">Home
                                                    01</a>
                                            </li>
                                            <li class="border-b border-dashed border-primary border-opacity-40 last:border-b-0 hover:border-solid transition-all">
                                                <a href="index-2.html" class="font-recoleta leading-[1.571] text-[14px] text-primary p-[10px] capitalize block transition-all hover:bg-primary hover:text-white text-center my-[-1px]">Home
                                                    02</a>
                                            </li>
                                            <li class="border-b border-dashed border-primary border-opacity-40 last:border-b-0 hover:border-solid transition-all">
                                                <a href="index-3.html" class="font-recoleta leading-[1.571] text-[14px] text-primary p-[10px] capitalize block transition-all hover:bg-primary hover:text-white text-center my-[-1px]">Home
                                                    03</a>
                                            </li>
                                            <li class="border-b border-dashed border-primary border-opacity-40 last:border-b-0 hover:border-solid transition-all">
                                                <a href="index-4.html" class="font-recoleta leading-[1.571] text-[14px] text-primary p-[10px] capitalize block transition-all hover:bg-primary hover:text-white text-center my-[-1px]">Home
                                                    04</a>
                                            </li>
                                            <li class="border-b border-dashed border-primary border-opacity-40 last:border-b-0 hover:border-solid transition-all">
                                                <a href="index-5.html" class="font-recoleta leading-[1.571] text-[14px] text-primary p-[10px] capitalize block transition-all hover:bg-primary hover:text-white text-center my-[-1px]">Home
                                                    05</a>
                                            </li>
                                            <li class="border-b border-dashed border-primary border-opacity-40 last:border-b-0 hover:border-solid transition-all">
                                                <a href="index-6.html" class="font-recoleta leading-[1.571] text-[14px] text-primary p-[10px] capitalize block transition-all hover:bg-primary hover:text-white text-center my-[-1px] rounded-b-[12px]">Home
                                                    06</a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="mr-7 xl:mr-[40px] relative group py-[20px]">

                                        <a href="about.html" class="transition-all hover:text-secondary">关于我们</a>

                                        <ul class="list-none bg-white drop-shadow-[0px_6px_10px_rgba(0,0,0,0.2)] rounded-[12px] flex flex-wrap flex-col w-[220px] absolute top-[120%] left-1/2 -translate-x-1/2 transition-all
            group-hover:top-[100%] invisible group-hover:visible opacity-0 group-hover:opacity-100
            
            ">
                                            <li class="border-b border-dashed border-primary border-opacity-40 last:border-b-0 hover:border-solid transition-all">
                                                <a href="about.html" class="font-recoleta leading-[1.571] text-[14px] text-primary p-[10px] capitalize block transition-all hover:bg-primary hover:text-white text-center my-[-1px] rounded-t-[12px]">about 01</a>
                                            </li>

                                            <li class="border-b border-dashed border-primary border-opacity-40 last:border-b-0 hover:border-solid transition-all">
                                                <a href="about-v2.html" class="font-recoleta leading-[1.571] text-[14px] text-primary p-[10px] capitalize block transition-all hover:bg-primary hover:text-white text-center my-[-1px] rounded-b-[12px]">about 02</a>
                                            </li>
                                        </ul>

                                    </li>
                                    <li class="mr-7 xl:mr-[40px] relative group py-[20px]">

                                        <a href="#" class="transition-all hover:text-secondary">房源</a>
                                        <ul class="list-none bg-white drop-shadow-[0px_6px_10px_rgba(0,0,0,0.2)] rounded-[12px] flex flex-wrap flex-col w-[220px] absolute top-[120%] left-1/2 -translate-x-1/2 transition-all
            group-hover:top-[100%] invisible group-hover:visible opacity-0 group-hover:opacity-100

            ">
                                            <li class="border-b border-dashed border-primary border-opacity-40 last:border-b-0 hover:border-solid transition-all">
                                                <a href="about.html" class="font-recoleta leading-[1.571] text-[14px] text-primary p-[10px] capitalize block transition-all hover:bg-primary hover:text-white text-center my-[-1px] rounded-t-[12px]">二手房购买</a>
                                            </li>

                                            <li class="border-b border-dashed border-primary border-opacity-40 last:border-b-0 hover:border-solid transition-all">
                                                <a href="about-v2.html" class="font-recoleta leading-[1.571] text-[14px] text-primary p-[10px] capitalize block transition-all hover:bg-primary hover:text-white text-center my-[-1px] rounded-b-[12px]">二手房租贷</a>
                                            </li>


<!--                                            <li class="mr-[70px]">-->
<!--                                                <ul>-->
<!--                                                    <li class="text-primary underline font-recoleta mb-[30px]">Properties</li>-->
<!--                                                    <li class="mb-[25px] last:mb-0">-->
<!--                                                        <a href="properties-v1.html" class="font-recoleta text-[14px] hover:text-secondary">Properties v1</a>-->
<!--                                                    </li>-->
<!--                                                    <li class="mb-[25px] last:mb-0">-->
<!--                                                        <a href="properties-v2.html" class="font-recoleta text-[14px] hover:text-secondary">Properties v2</a>-->
<!--                                                    </li>-->

<!--                                                    <li class="mb-[25px] last:mb-0">-->
<!--                                                        <a href="add-properties.html" class="font-recoleta text-[14px] hover:text-secondary">Add properties</a>-->
<!--                                                    </li>-->
<!--                                                </ul>-->
<!--                                            </li>-->

<!--                                            <li class="mr-[70px]">-->
<!--                                                <ul>-->
<!--                                                    <li class="text-primary underline font-recoleta mb-[30px]">Properties1 with sidebar</li>-->
<!--                                                    <li class="mb-[25px] last:mb-0">-->
<!--                                                        <a href="properties-left-side-bar.html" class="font-recoleta text-[14px] hover:text-secondary">Properties left side bar</a>-->
<!--                                                    </li>-->
<!--                                                    <li class="mb-[25px] last:mb-0">-->
<!--                                                        <a href="properties-right-side-bar.html" class="font-recoleta text-[14px] hover:text-secondary">Properties right side bar</a>-->
<!--                                                    </li>-->

<!--                                                    <li class="mb-[25px] last:mb-0">-->
<!--                                                        <a href="properties-list-left-side-bar.html" class="font-recoleta text-[14px] hover:text-secondary">Properties list left side bar</a>-->
<!--                                                    </li>-->

<!--                                                    <li class="mb-[25px] last:mb-0">-->
<!--                                                        <a href="properties-list-right-side-bar.html" class="font-recoleta text-[14px] hover:text-secondary">Properties list-->
<!--                                                            right side bar</a>-->
<!--                                                    </li>-->
<!--                                                </ul>-->
<!--                                            </li>-->


<!--                                            <li>-->
<!--                                                <ul>-->
<!--                                                    <li class="text-primary underline font-recoleta mb-[30px]">Property Details</li>-->
<!--                                                    <li class="mb-[25px] last:mb-0">-->
<!--                                                        <a href="add-properties.html" class="font-recoleta text-[14px] hover:text-secondary">Add properties</a>-->
<!--                                                    </li>-->

<!--                                                    <li class="mb-[25px] last:mb-0">-->
<!--                                                        <a href="properties-details.html" class="font-recoleta text-[14px] hover:text-secondary">Properties details</a>-->
<!--                                                    </li>-->

<!--                                                </ul>-->
<!--                                            </li>-->

                                        </ul>
                                    </li>
                                    <li class="mr-7 xl:mr-[40px] relative group py-[20px]">

                                        <a href="#" class="transition-all hover:text-secondary">公告信息</a>
<!--                                        <ul class="list-none bg-white drop-shadow-[0px_6px_10px_rgba(0,0,0,0.2)] rounded-[12px] flex flex-wrap flex-col w-[220px] absolute top-[120%] left-1/2 -translate-x-1/2 transition-all-->
<!--            group-hover:top-[100%] invisible group-hover:visible opacity-0 group-hover:opacity-100-->
<!--            -->
<!--            ">-->

<!--                                            <li class="border-b border-dashed border-primary border-opacity-40 last:border-b-0 hover:border-solid transition-all">-->
<!--                                                <a href="service.html" class="font-recoleta leading-[1.571] text-[14px] text-primary p-[10px] capitalize block transition-all hover:bg-primary hover:text-white text-center my-[-1px] rounded-t-[12px]">Service</a>-->
<!--                                            </li>-->

<!--                                            <li class="border-b border-dashed border-primary border-opacity-40 last:border-b-0 hover:border-solid transition-all">-->
<!--                                                <a href="single-service.html" class="font-recoleta leading-[1.571] text-[14px] text-primary p-[10px] capitalize block transition-all hover:bg-primary hover:text-white text-center my-[-1px]">single service</a>-->
<!--                                            </li>-->

<!--                                            <li class="border-b border-dashed border-primary border-opacity-40 last:border-b-0 hover:border-solid transition-all">-->
<!--                                                <a href="login.html" class="font-recoleta leading-[1.571] text-[14px] text-primary p-[10px] capitalize block transition-all hover:bg-primary hover:text-white text-center my-[-1px]">login</a>-->
<!--                                            </li>-->
<!--                                            <li class="border-b border-dashed border-primary border-opacity-40 last:border-b-0 hover:border-solid transition-all">-->
<!--                                                <a href="register.html" class="font-recoleta leading-[1.571] text-[14px] text-primary p-[10px] capitalize block transition-all hover:bg-primary hover:text-white text-center my-[-1px] rounded-b-[12px]">register</a>-->
<!--                                            </li>-->
<!--                                        </ul>-->
<!--                                    </li>-->
<!--                                    <li class="mr-7 xl:mr-[40px] relative group py-[20px]">-->

<!--                                        <a href="agency.html" class="transition-all hover:text-secondary">Agency</a>-->
<!--                                        <ul class="list-none bg-white drop-shadow-[0px_6px_10px_rgba(0,0,0,0.2)] rounded-[12px] flex flex-wrap flex-col w-[220px] absolute top-[120%] left-1/2 -translate-x-1/2 transition-all-->
<!--            group-hover:top-[100%] invisible group-hover:visible opacity-0 group-hover:opacity-100-->
<!--            -->
<!--            ">-->
<!--                                            <li class="border-b border-dashed border-primary border-opacity-40 last:border-b-0 hover:border-solid transition-all">-->
<!--                                                <a href="agency.html" class="font-recoleta leading-[1.571] text-[14px] text-primary p-[10px] capitalize block transition-all hover:bg-primary hover:text-white text-center my-[-1px] rounded-t-[12px]">agency</a>-->
<!--                                            </li>-->
<!--                                            <li class="border-b border-dashed border-primary border-opacity-40 last:border-b-0 hover:border-solid transition-all">-->
<!--                                                <a href="create-agency.html" class="font-recoleta leading-[1.571] text-[14px] text-primary p-[10px] capitalize block transition-all hover:bg-primary hover:text-white text-center my-[-1px]">create-->
<!--                                                    agency</a>-->
<!--                                            </li>-->

<!--                                            <li class="border-b border-dashed border-primary border-opacity-40 last:border-b-0 hover:border-solid transition-all">-->
<!--                                                <a href="agent.html" class="font-recoleta leading-[1.571] text-[14px] text-primary p-[10px] capitalize block transition-all hover:bg-primary hover:text-white text-center my-[-1px]">agent</a>-->
<!--                                            </li>-->

<!--                                            <li class="border-b border-dashed border-primary border-opacity-40 last:border-b-0 hover:border-solid transition-all">-->
<!--                                                <a href="agency-details.html" class="font-recoleta leading-[1.571] text-[14px] text-primary p-[10px] capitalize block transition-all hover:bg-primary hover:text-white text-center my-[-1px]">agency-->
<!--                                                    details</a>-->
<!--                                            </li>-->

<!--                                            <li class="border-b border-dashed border-primary border-opacity-40 last:border-b-0 hover:border-solid transition-all">-->
<!--                                                <a href="agent-details.html" class="font-recoleta leading-[1.571] text-[14px] text-primary p-[10px] capitalize block transition-all hover:bg-primary hover:text-white text-center my-[-1px] rounded-b-[12px]">agent-->
<!--                                                    details</a>-->
<!--                                            </li>-->

<!--                                        </ul>-->


<!--                                    </li>-->
<!--                                    <li class="mr-7 xl:mr-[40px] relative group py-[20px]">-->

<!--                                        <a href="#" class="transition-all hover:text-secondary">Blog</a>-->
<!--                                        <ul class="list-none bg-white drop-shadow-[0px_6px_10px_rgba(0,0,0,0.2)] rounded-[12px] flex flex-wrap flex-col w-[220px] absolute top-[120%] left-1/2 -translate-x-1/2 transition-all-->
<!--            group-hover:top-[100%] invisible group-hover:visible opacity-0 group-hover:opacity-100-->
<!--            -->
<!--            ">-->
<!--                                            <li class="border-b border-dashed border-primary border-opacity-40 last:border-b-0 hover:border-solid transition-all">-->
<!--                                                <a href="blog-grid.html" class="font-recoleta leading-[1.571] text-[14px] text-primary p-[10px] capitalize block transition-all hover:bg-primary hover:text-white text-center my-[-1px] rounded-t-[12px]">blog-->
<!--                                                    grid</a>-->
<!--                                            </li>-->
<!--                                            <li class="border-b border-dashed border-primary border-opacity-40 last:border-b-0 hover:border-solid transition-all">-->
<!--                                                <a href="blog-grid-left-side-bar.html" class="font-recoleta leading-[1.571] text-[14px] text-primary p-[10px] capitalize block transition-all hover:bg-primary hover:text-white text-center my-[-1px]">blog-->
<!--                                                    grid left side bar</a>-->
<!--                                            </li>-->
<!--                                            <li class="border-b border-dashed border-primary border-opacity-40 last:border-b-0 hover:border-solid transition-all">-->
<!--                                                <a href="blog-grid-right-side-bar.html" class="font-recoleta leading-[1.571] text-[14px] text-primary p-[10px] capitalize block transition-all hover:bg-primary hover:text-white text-center my-[-1px]">blog-->
<!--                                                    grid right side bar</a>-->
<!--                                            </li>-->
<!--                                            <li class="border-b border-dashed border-primary border-opacity-40 last:border-b-0 hover:border-solid transition-all">-->
<!--                                                <a href="blog-details.html" class="font-recoleta leading-[1.571] text-[14px] text-primary p-[10px] capitalize block transition-all hover:bg-primary hover:text-white text-center my-[-1px] rounded-b-[12px]">blog-->
<!--                                                    details</a>-->
<!--                                            </li>-->

<!--                                        </ul>-->

<!--                                    </li>-->
                                    <li class="mr-7 xl:mr-[40px] relative group py-[20px]">

                                        <a href="contact-us.html" class="transition-all hover:text-secondary">联系我们</a>

                                    </li>
                                </ul>

                                <ul class="flex flex-wrap items-center">
                                    <li class="sm:mr-5 xl:mr-[20px] relative group"><a href="#">
                                            <img src="/static/images/user/avater.png" loading="lazy" width="62" height="62" alt="avater">
                                        </a>

                                        <ul class="list-none bg-white drop-shadow-[0px_6px_10px_rgba(0,0,0,0.2)] rounded-[12px] flex flex-wrap flex-col w-[180px] absolute top-[120%] sm:left-1/2 sm:-translate-x-1/2 transition-all
                group-hover:top-[60px] invisible group-hover:visible opacity-0 group-hover:opacity-100 right-0
                
                ">
                                            <li class="border-b border-dashed border-primary border-opacity-40 last:border-b-0 hover:border-solid transition-all">
                                                <a href="/login" class="font-recoleta leading-[1.571] text-[14px] text-primary p-[10px] capitalize block transition-all hover:bg-primary hover:text-white text-center my-[-1px] rounded-t-[12px]">登陆</a>
                                            </li>

                                            <li class="border-b border-dashed border-primary border-opacity-40 last:border-b-0 hover:border-solid transition-all">
                                                <a href="/register" class="font-recoleta leading-[1.571] text-[14px] text-primary p-[10px] capitalize block transition-all hover:bg-primary hover:text-white text-center my-[-1px] rounded-b-[12px]">注册</a>
                                            </li>


                                        </ul>
                                    </li>
                                    <li>
                                        <a href="add-properties.html" class="before:rounded-md before:block before:absolute before:left-auto before:right-0 before:inset-y-0 before:-z-[1] before:bg-secondary before:w-0 hover:before:w-full hover:before:left-0 hover:before:right-auto before:transition-all leading-none px-[20px] py-[15px] capitalize font-medium text-white hidden sm:block text-[14px] xl:text-[16px] relative after:block after:absolute after:inset-0 after:-z-[2] after:bg-primary after:rounded-md after:transition-all">Add
                                            Property</a>
                                    </li>
                                    <li class="ml-2 sm:ml-5 lg:hidden">
                                        <a href="#offcanvas-mobile-menu" class="offcanvas-toggle flex text-[#016450] hover:text-secondary">
                                            <svg width="24" height="24" class="fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
                                                <path d="M0 96C0 78.33 14.33 64 32 64H416C433.7 64 448 78.33 448 96C448 113.7 433.7 128 416 128H32C14.33 128 0 113.7 0 96zM0 256C0 238.3 14.33 224 32 224H416C433.7 224 448 238.3 448 256C448 273.7 433.7 288 416 288H32C14.33 288 0 273.7 0 256zM416 448H32C14.33 448 0 433.7 0 416C0 398.3 14.33 384 32 384H416C433.7 384 448 398.3 448 416C448 433.7 433.7 448 416 448z" />
                                            </svg>
                                        </a>
                                    </li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </header>

        <!-- offcanvas-overlay start -->
        <div class="offcanvas-overlay hidden fixed inset-0 bg-black opacity-50 z-50"></div>
        <!-- offcanvas-overlay end -->
        <!-- offcanvas-mobile-menu start -->
        <div id="offcanvas-mobile-menu" class="offcanvas left-0 transform -translate-x-full fixed font-normal text-sm top-0 z-50 h-screen xs:w-[300px] lg:w-[380px] transition-all ease-in-out duration-300 bg-white">

            <div class="py-12 pr-5 h-[100vh] overflow-y-auto">
                <!-- close button start -->
                <button class="offcanvas-close text-primary text-[25px] w-10 h-10 absolute right-0 top-0 z-[1]" aria-label="offcanvas">x</button>
                <!-- close button end -->




            </div>
        </div>
        <!-- offcanvas-mobile-menu end -->
        <!-- Header end -->

        <!-- Hero section start -->
        <section class="bg-[#FFF6F0] relative">
            <div class="hero-slider overflow-hidden pt-[130px] lg:pt-[80px] xl:pt-[0px] pb-[70px] lg:pb-[0px]">
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <!-- swiper-slide start -->
                        <div class="swiper-slide lg:h-[700px] xl:h-[960px] xs:h-[auto] flex flex-wrap items-center">
                            <div class="container">
                                <div class="grid grid-cols-12">
                                    <div class="col-span-12 lg:col-span-5 xl:col-span-6">
                                        <div class="slider-content">
                                            <div class="relative mb-5 sub_title">
                                                <img class="animate-animateSpin" src="/static/images/hero/cogs.png" width="62" height="62" alt="icon">
                                                <span class="bg-[#FFF6F0] text-base text-secondary block absolute left-[28px] top-1/2 -translate-y-1/2">我爱我家</span>
                                            </div>
                                            <h1 class="font-recoleta text-primary text-[36px] sm:text-[50px] md:text-[68px] lg:text-[50px] leading-tight xl:text-2xl title">

                                                <span>住进每一种生活</span>

                                            </h1>

                                            <p class="text-base text-[#494949] mt-5 mb-8 text max-w-[570px]">
                                                找到最适合你的房子
                                            </p>
                                            <div class="inline-block mb-7 hero_btn">
                                                <a href="contact-us.html" class="before:rounded-md before:block before:absolute before:left-auto before:right-0 before:inset-y-0 before:-z-[1] before:bg-secondary before:w-0 hover:before:w-full hover:before:left-0 hover:before:right-auto before:transition-all leading-none px-[20px] py-[15px] capitalize font-medium text-white text-[14px] xl:text-[16px] relative after:block after:absolute after:inset-0 after:-z-[2] after:bg-primary after:rounded-md after:transition-all block">联系
                                                    us</a>
                                            </div>
                                            <span class="block font-recoleta hero_info"><span
                      class="text-[20px] sm:text-[22px] text-secondary">有问题请联系我们</span> <a href="" class="text-[22px] sm:text-[32px] text-primary hover:underline">+9985 254 784</a></span>
                                        </div>
                                    </div>
                                    <div class="col-span-12 lg:col-span-7 xl:col-span-6">
                                        <div class="relative mt-10 md:mt-0 lg:absolute xl:right-[30px] 2xl:right-[130px] lg:top-1/2 lg:-translate-y-1/2 3xl:max-w-[830px] 2xl:max-w-[700px] xl:max-w-[630px] lg:max-w-[550px]">
                                            <img class="hero_image" src="/static/images/hero/hero.png" width="849" height="739" alt="hero image">


                                            <svg class="mysvg absolute top-[-20px] md:top-[0px] lg:top-[20px] xl:top-[38px] 2xl:top-[68px] 3xl:top-[133px] 3xl:left-[-50px] 2xl:left-[-40px] xl:left-[-40px] lg:left-[-40px] left-0" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 52 52" width="52" height="52">

                                                <path class="st0" d="M2.96,30.53c-4.57,5.96,3.81,15.3,11.32,18.61c7.49,3.3,17.32,0.85,24.15-3.06  c13.78-7.89,15.38-21.63,6.69-34.15C39.86,4.34,29.33-3.09,20.4,3.8c-5.04,3.88-9.25,13.06-6.87,19.32  c1.57,4.13,11.66,10.45,14.59,4.17c2.45-5.24-7.77-5.94-8.2-10.79C19.3,9.5,28.7,8.86,32.96,10.95c8.35,4.08,9.53,19.1,2.7,25.09  c-5.01,4.39-16.54,4.55-22.15,0.92C11.34,35.55,7.83,26.66,2.96,30.53z" />

                                            </svg>


                                            <div class="scene" data-relative-input="true">
                                                <img data-depth="0.2" class="hero-star absolute bottom-[-55px] sm:bottom-0 lg:bottom-[150px] xl:bottom-[185px] 3xl:bottom-[250px] 3xl:left-[60px] 2xl:left-[50px] lg:left-[30px]" src="/static/images/hero/shape2.svg" width="98" height="74" alt="icon">
                                            </div>

                                            <svg class="orange-shape absolute bottom-[0%] lg:bottom-[120px] xl:bottom-[140px] 2xl:bottom-[150px] 3xl:bottom-[190px] 3xl:right-[135px] 2xl:right-[120px] xl:right-[110px] lg:right-[80px] right-[30px]" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59 56" width="59" height="56">

                                                <g>
                                                    <path class="" d="M25.76,1.27c-5.34,0-10.59,1.54-15.11,5.09C-0.23,14.91-1.08,29.98,3.7,42.08c1.32,3.35,2.95,7.45,5.62,10.18   c0.99,1.02,2.13,1.85,3.44,2.38c1.12,0.45,2.45,0.69,3.81,0.69c3.4,0,6.94-1.52,7.44-5.08c0.6-4.24-7.99-11.32-8.9-16.26   C13.16,23.47,19.02,18,25.97,18c4.89,0,10.32,2.7,13.96,8.25c2.28,3.46,7.05,9.61,11.65,9.61c1.6,0,3.18-0.74,4.63-2.6   c6.24-7.99-4.66-20.84-10.6-25.17C39.84,3.89,32.73,1.27,25.76,1.27L25.76,1.27z" />
                                                </g>
                                            </svg>


                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- swiper-slide end-->
                    </div>
                </div>

                <!-- Add Pagination -->
                <div class="swiper-pagination"></div>
                <!-- swiper navigation -->

            </div>

            <img class="absolute left-0 bottom-0" src="/static/images/hero/star.png" width="112" height="138" alt="icon">
        </section>



        <!-- Hero section end -->

<!--搜索框-->
        <!-- Addvanced search tab start -->
<!--        <div class="mt-[80px] lg:mt-[120px] xl:mt-[-160px] relative z-[2] pl-[40px] lg:pl-[50px] xl:pl-[0px]">-->
<!--            <div class="container">-->
<!--                <div class="grid grid-cols-12">-->
<!--                    <div class="col-span-12 relative">-->
<!--                        <ul class="tab-nav search-tab inline-flex px-[15px] sm:px-[30px] py-[22px] border-l border-t border-r border-solid border-[#016450] border-opacity-25 rounded-tl-[15px] rounded-tr-[15px] bg-white">-->
<!--                            <li data-tab="buy" class="mr-[5px] sm:mr-[10px] md:mr-[46px] my-1 active"><button class="font-recoleta leading-none px-[5px] sm:px-[10px] capitalize text-primary transition-all text-base xl:text-[22px] before:absolute before:left-auto before:right-0 before:bottom-[-32px] before:w-0 before:h-[2px] before:content-[''] before:bg-secondary relative before:transition-all ease-out">buy</button>-->
<!--                            </li>-->
<!--                            <li data-tab="sell" class="mr-[5px] sm:mr-[10px] md:mr-[46px] my-1"><button class="font-recoleta leading-none px-[5px] sm:px-[10px] capitalize text-primary transition-all text-base xl:text-[22px] before:absolute before:left-auto before:right-0 before:bottom-[-32px] before:w-0 before:h-[2px] before:content-[''] before:bg-secondary relative before:transition-all ease-out">sell</button>-->
<!--                            </li>-->
<!--                            <li data-tab="rent" class="mr-[5px] sm:mr-[10px] md:mr-[46px] my-1"><button class="font-recoleta leading-none px-[5px] sm:px-[10px] capitalize text-primary transition-all text-base xl:text-[22px] before:absolute before:left-auto before:right-0 before:bottom-[-32px] before:w-0 before:h-[2px] before:content-[''] before:bg-secondary relative before:transition-all ease-out">rent</button>-->
<!--                            </li>-->
<!--                            <li data-tab="co-living" class="md:mr-[0px] my-1"><button class="font-recoleta leading-none px-[5px] sm:px-[10px] capitalize text-primary transition-all text-base xl:text-[22px] before:absolute before:left-auto before:right-0 before:bottom-[-32px] before:w-0 before:h-[2px] before:content-[''] before:bg-secondary relative before:transition-all ease-out">Co-living</button>-->
<!--                            </li>-->
<!--                        </ul>-->

<!--                        <button class="tab-toggle-btn px-[10px] py-[15px] absolute bottom-[-56px] left-[-45px] border-l border-t border-b border-solid border-[#016450] bg-white text-primary border-opacity-25 rounded-tl-[10px] rounded-bl-[10px]" aria-label="svg icon">-->
<!--                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">-->
<!--                                <path d="M19 22V11" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />-->
<!--                                <path d="M19 7V2" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />-->
<!--                                <path d="M12 22V17" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />-->
<!--                                <path d="M12 13V2" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />-->
<!--                                <path d="M5 22V11" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />-->
<!--                                <path d="M5 7V2" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />-->
<!--                                <path d="M3 11H7" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />-->
<!--                                <path d="M17 11H21" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />-->
<!--                                <path d="M10 13H14" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />-->
<!--                            </svg>-->
<!--                        </button>-->
<!--                    </div>-->
<!--                    <div class="col-span-12 selectricc-border-none">-->
<!--                        <div id="buy" class="tab-content bg-white border border-solid border-[#016450] border-opacity-25 rounded-bl-[15px] rounded-br-[15px] rounded-tr-[15px] px-[15px] sm:px-[30px] py-[40px] active">-->
<!--                            <form action="#">-->
<!--                                <div class="advanced-searrch flex flex-wrap items-center -mb-[45px]">-->

<!--                                    <div class="advanced-searrch-list flex items-center lg:border-r lg:border-[#D6D4D4] lg:mr-[40px] xl:mr-[50px] last:mr-0 last:border-r-0 mb-[45px]">-->
<!--                                        <div class="mr-4 self-start shrink-0">-->
<!--                                            <img src="/static/images/icon/location.svg" width="24" height="24" alt="svg icon">-->
<!--                                        </div>-->
<!--                                        <div class="flex-1">-->
<!--                                            <label for="location" class="font-recoleta block capitalize text-primary text-[18px] xl:text-[25px] leading-none mb-1">Location</label>-->
<!--                                            <input id="location" type="text" placeholder="Choose location" class="text-tiny placeholder:text-body leading-none font-light pr-3 focus:outline-none w-full">-->
<!--                                        </div>-->
<!--                                    </div>-->

<!--                                    <div class="advanced-searrch-list flex items-center lg:border-r lg:border-[#D6D4D4] lg:mr-[40px] xl:mr-[50px] last:mr-0 last:border-r-0 mb-[45px]">-->
<!--                                        <div class="mr-4 self-start shrink-0">-->
<!--                                            <img src="/static/images/icon/property.svg" width="24" height="24" alt="svg icon">-->
<!--                                        </div>-->
<!--                                        <div class="flex-1">-->
<!--                                            <label for="property" class="font-recoleta block capitalize text-primary text-[18px] xl:text-[25px] leading-none mb-1">Property-->
<!--                                                Type</label>-->
<!--                                            <select name="property" id="property" class="nice-select appearance-none bg-transparent text-tiny font-light cursor-pointer">-->
<!--                                                <option selected value="0">Duplex House</option>-->
<!--                                                <option value="1">Duplex House 1</option>-->
<!--                                                <option value="2">Duplex House 2</option>-->
<!--                                                <option value="3">Duplex House 3</option>-->
<!--                                            </select>-->
<!--                                        </div>-->
<!--                                    </div>-->

<!--                                    <div class="advanced-searrch-list flex items-center lg:border-r lg:border-[#D6D4D4] lg:mr-[40px] xl:mr-[50px] last:mr-0 last:border-r-0 mb-[45px]">-->
<!--                                        <div class="mr-4 self-start shrink-0">-->
<!--                                            <img src="/static/images/icon/dollar-circle.svg" width="24" height="24" alt="svg icon">-->
<!--                                        </div>-->
<!--                                        <div class="flex-1">-->
<!--                                            <label for="price" class="font-recoleta block capitalize text-primary text-[18px] xl:text-[25px] leading-none mb-1">Price-->
<!--                                                Range</label>-->
<!--                                            <select name="price" id="price" class="nice-select appearance-none bg-transparent text-tiny font-light cursor-pointer">-->
<!--                                                <option selected value="0">1500 USD</option>-->
<!--                                                <option value="1">1600 USD</option>-->
<!--                                                <option value="2">1700 USD</option>-->
<!--                                                <option value="3">1800 USD</option>-->
<!--                                            </select>-->
<!--                                        </div>-->

<!--                                    </div>-->

<!--                                    <div class="advanced-searrch-list flex items-center lg:border-r lg:border-[#D6D4D4] lg:mr-[40px] xl:mr-[50px] last:mr-0 last:border-r-0 mb-[45px] relative">-->

<!--                                        <div class="mr-4 self-start shrink-0">-->
<!--                                            <img src="/static/images/icon/area.svg" width="24" height="24" alt="svg icon">-->
<!--                                        </div>-->

<!--                                        <div class="flex-1">-->
<!--                                            <label for="property-size" class="font-recoleta block capitalize text-primary text-[18px] xl:text-[25px] leading-none mb-1">Property-->
<!--                                                Size</label>-->
<!--                                            <select name="property-size" id="property-size" class="nice-select appearance-none bg-transparent text-tiny font-light cursor-pointer">-->
<!--                                                <option selected value="0">2500 Sqft</option>-->
<!--                                                <option value="1">2600 Sqft</option>-->
<!--                                                <option value="2">2700 Sqft</option>-->
<!--                                                <option value="3">2800 Sqft</option>-->
<!--                                            </select>-->
<!--                                        </div>-->
<!--                                        <button class="search-btn absolute right-0 lg:right-[-60px] xl:right-[-70px]">-->
<!--                                            <img src="/static/images/icon/search-outline.svg" class="max-w-[30px] xl:w-auto" width="40" height="40" alt="svg icon">-->
<!--                                            <span class="hidden">Search Properties</span>-->
<!--                                        </button>-->
<!--                                    </div>-->

<!--                                </div>-->



<!--                                <div class="advanced-searrch-hidden flex flex-wrap items-center mt-[45px] -mb-[45px]">-->

<!--                                    <div class="advanced-searrch-list flex items-center lg:border-r lg:border-[#D6D4D4] lg:mr-[40px] xl:mr-[50px] last:mr-0 last:border-r-0 mb-[45px] search-list">-->
<!--                                        <div class="mr-4 self-start shrink-0">-->
<!--                                            <img src="/static/images/icon/location.svg" width="24" height="24" alt="svg icon">-->
<!--                                        </div>-->
<!--                                        <div class="flex-1">-->
<!--                                            <label for="bedrooms10" class="font-recoleta block capitalize text-primary text-[18px] xl:text-[25px] leading-none mb-1">Bedrooms</label>-->
<!--                                            <select name="property" id="bedrooms10" class="nice-select appearance-none bg-transparent text-tiny font-light cursor-pointer">-->
<!--                                                <option selected value="0">Bedrooms</option>-->
<!--                                                <option value="1">kitchen</option>-->
<!--                                                <option value="2">dinning rooms</option>-->
<!--                                                <option value="3">Duplex House 3</option>-->
<!--                                            </select>-->
<!--                                        </div>-->
<!--                                    </div>-->

<!--                                    <div class="advanced-searrch-list flex items-center lg:border-r lg:border-[#D6D4D4] lg:mr-[40px] xl:mr-[50px] last:mr-0 last:border-r-0 mb-[45px] search-list">-->
<!--                                        <div class="mr-4 self-start shrink-0">-->
<!--                                            <img src="/static/images/icon/property.svg" width="24" height="24" alt="svg icon">-->
<!--                                        </div>-->
<!--                                        <div class="flex-1">-->
<!--                                            <label for="property9" class="font-recoleta block capitalize text-primary text-[18px] xl:text-[25px] leading-none mb-1">Bathrooms</label>-->
<!--                                            <select name="property" id="property9" class="nice-select appearance-none bg-transparent text-tiny font-light cursor-pointer">-->
<!--                                                <option selected value="0">Duplex House</option>-->
<!--                                                <option value="1">Duplex House 1</option>-->
<!--                                                <option value="2">Duplex House 2</option>-->
<!--                                                <option value="3">Duplex House 3</option>-->
<!--                                            </select>-->
<!--                                        </div>-->
<!--                                    </div>-->

<!--                                    <div class="advanced-searrch-list flex items-center lg:border-r lg:border-[#D6D4D4] lg:mr-[40px] xl:mr-[50px] last:mr-0 last:border-r-0 mb-[45px] search-list">-->
<!--                                        <div class="mr-4 self-start shrink-0">-->
<!--                                            <img src="/static/images/icon/dollar-circle.svg" width="24" height="24" alt="svg icon">-->
<!--                                        </div>-->
<!--                                        <div class="flex-1">-->
<!--                                            <label for="garage" class="font-recoleta block capitalize text-primary text-[18px] xl:text-[25px] leading-none mb-1">Garage</label>-->
<!--                                            <select name="garage" id="garage" class="nice-select appearance-none bg-transparent text-tiny font-light cursor-pointer">-->
<!--                                                <option selected value="0">2 Garage</option>-->
<!--                                                <option value="1">2 Garage</option>-->
<!--                                                <option value="2">3 Garage</option>-->
<!--                                                <option value="3">4 Garage</option>-->
<!--                                            </select>-->
<!--                                        </div>-->

<!--                                    </div>-->

<!--                                    <div class="advanced-searrch-list flex items-center lg:border-r lg:border-[#D6D4D4] lg:mr-[40px] xl:mr-[50px] last:mr-0 last:border-r-0 mb-[45px] search-list">-->
<!--                                        <button class="search-properties-btn">-->
<!--                                            Search Properties-->
<!--                                        </button>-->
<!--                                    </div>-->

<!--                                </div>-->


<!--                            </form>-->
<!--                        </div>-->


<!--                        <div id="sell" class="tab-content bg-white border border-solid border-[#016450] border-opacity-25 rounded-bl-[15px] rounded-br-[15px] rounded-tr-[15px] px-[15px] sm:px-[30px] py-[40px]">-->
<!--                            <form action="#">-->
<!--                                <div class="advanced-searrch flex flex-wrap items-center -mb-[45px]">-->

<!--                                    <div class="advanced-searrch-list flex items-center lg:border-r lg:border-[#D6D4D4] lg:mr-[40px] xl:mr-[50px] last:mr-0 last:border-r-0 mb-[45px]">-->
<!--                                        <div class="mr-4 self-start shrink-0">-->
<!--                                            <img src="/static/images/icon/location.svg" width="24" height="24" alt="svg icon">-->
<!--                                        </div>-->
<!--                                        <div class="flex-1">-->
<!--                                            <label for="location2" class="font-recoleta block capitalize text-primary text-[18px] xl:text-[25px] leading-none mb-1">Location</label>-->
<!--                                            <input id="location2" type="text" placeholder="Choose location" class="text-tiny placeholder:text-body leading-none font-light pr-3 focus:outline-none w-full">-->
<!--                                        </div>-->
<!--                                    </div>-->

<!--                                    <div class="advanced-searrch-list flex items-center lg:border-r lg:border-[#D6D4D4] lg:mr-[40px] xl:mr-[50px] last:mr-0 last:border-r-0 mb-[45px]">-->
<!--                                        <div class="mr-4 self-start shrink-0">-->
<!--                                            <img src="/static/images/icon/property.svg" width="24" height="24" alt="svg icon">-->
<!--                                        </div>-->
<!--                                        <div class="flex-1">-->
<!--                                            <label for="property2" class="font-recoleta block capitalize text-primary text-[18px] xl:text-[25px] leading-none mb-1">Property-->
<!--                                                Type</label>-->
<!--                                            <select name="property" id="property2" class="nice-select appearance-none bg-transparent text-tiny font-light cursor-pointer">-->
<!--                                                <option selected value="0">Apartments</option>-->
<!--                                                <option value="1">Duplex House 1</option>-->
<!--                                                <option value="2">Duplex House 2</option>-->
<!--                                                <option value="3">Duplex House 3</option>-->
<!--                                            </select>-->
<!--                                        </div>-->
<!--                                    </div>-->

<!--                                    <div class="advanced-searrch-list flex items-center lg:border-r lg:border-[#D6D4D4] lg:mr-[40px] xl:mr-[50px] last:mr-0 last:border-r-0 mb-[45px]">-->
<!--                                        <div class="mr-4 self-start shrink-0">-->
<!--                                            <img src="/static/images/icon/dollar-circle.svg" width="24" height="24" alt="svg icon">-->
<!--                                        </div>-->
<!--                                        <div class="flex-1">-->
<!--                                            <label for="price2" class="font-recoleta block capitalize text-primary text-[18px] xl:text-[25px] leading-none mb-1">Price-->
<!--                                                Range</label>-->
<!--                                            <select name="price" id="price2" class="nice-select appearance-none bg-transparent text-tiny font-light cursor-pointer">-->
<!--                                                <option selected value="0">100 USD</option>-->
<!--                                                <option value="1">600 USD</option>-->
<!--                                                <option value="2">700 USD</option>-->
<!--                                                <option value="3">800 USD</option>-->
<!--                                            </select>-->
<!--                                        </div>-->

<!--                                    </div>-->

<!--                                    <div class="advanced-searrch-list flex items-center lg:border-r lg:border-[#D6D4D4] lg:mr-[40px] xl:mr-[50px] last:mr-0 last:border-r-0 mb-[45px] relative">-->

<!--                                        <div class="mr-4 self-start shrink-0">-->
<!--                                            <img src="/static/images/icon/area.svg" width="24" height="24" alt="svg icon">-->
<!--                                        </div>-->

<!--                                        <div class="flex-1">-->
<!--                                            <label for="property-size2" class="font-recoleta block capitalize text-primary text-[18px] xl:text-[25px] leading-none mb-1">Property-->
<!--                                                Size</label>-->
<!--                                            <select name="property-size" id="property-size2" class="nice-select appearance-none bg-transparent text-tiny font-light cursor-pointer">-->
<!--                                                <option selected value="0">500 Sqft</option>-->
<!--                                                <option value="1">600 Sqft</option>-->
<!--                                                <option value="2">700 Sqft</option>-->
<!--                                                <option value="3">800 Sqft</option>-->
<!--                                            </select>-->
<!--                                        </div>-->
<!--                                        <button class="search-btn absolute right-0 lg:right-[-60px] xl:right-[-70px]">-->
<!--                                            <img src="/static/images/icon/search-outline.svg" class="max-w-[30px] xl:w-auto" width="40" height="40" alt="svg icon">-->
<!--                                            <span class="hidden">Search Properties</span>-->
<!--                                        </button>-->
<!--                                    </div>-->

<!--                                </div>-->


<!--                                <div class="advanced-searrch-hidden flex flex-wrap items-center mt-[45px] -mb-[45px]">-->

<!--                                    <div class="advanced-searrch-list flex items-center lg:border-r lg:border-[#D6D4D4] lg:mr-[40px] xl:mr-[50px] last:mr-0 last:border-r-0 mb-[45px] search-list">-->
<!--                                        <div class="mr-4 self-start shrink-0">-->
<!--                                            <img src="/static/images/icon/location.svg" width="24" height="24" alt="svg icon">-->
<!--                                        </div>-->
<!--                                        <div class="flex-1">-->
<!--                                            <label for="bedrooms" class="font-recoleta block capitalize text-primary text-[18px] xl:text-[25px] leading-none mb-1">Bedrooms</label>-->
<!--                                            <select name="property" id="bedrooms" class="nice-select appearance-none bg-transparent text-tiny font-light cursor-pointer">-->
<!--                                                <option selected value="0">Bedrooms</option>-->
<!--                                                <option value="1">kitchen</option>-->
<!--                                                <option value="2">dinning rooms</option>-->
<!--                                                <option value="3">Duplex House 3</option>-->
<!--                                            </select>-->
<!--                                        </div>-->
<!--                                    </div>-->

<!--                                    <div class="advanced-searrch-list flex items-center lg:border-r lg:border-[#D6D4D4] lg:mr-[40px] xl:mr-[50px] last:mr-0 last:border-r-0 mb-[45px] search-list">-->
<!--                                        <div class="mr-4 self-start shrink-0">-->
<!--                                            <img src="/static/images/icon/property.svg" width="24" height="24" alt="svg icon">-->
<!--                                        </div>-->
<!--                                        <div class="flex-1">-->
<!--                                            <label for="property3" class="font-recoleta block capitalize text-primary text-[18px] xl:text-[25px] leading-none mb-1">Bathrooms</label>-->
<!--                                            <select name="property" id="property3" class="nice-select appearance-none bg-transparent text-tiny font-light cursor-pointer">-->
<!--                                                <option selected value="0">Duplex House</option>-->
<!--                                                <option value="1">Duplex House 1</option>-->
<!--                                                <option value="2">Duplex House 2</option>-->
<!--                                                <option value="3">Duplex House 3</option>-->
<!--                                            </select>-->
<!--                                        </div>-->
<!--                                    </div>-->

<!--                                    <div class="advanced-searrch-list flex items-center lg:border-r lg:border-[#D6D4D4] lg:mr-[40px] xl:mr-[50px] last:mr-0 last:border-r-0 mb-[45px] search-list">-->
<!--                                        <div class="mr-4 self-start shrink-0">-->
<!--                                            <img src="/static/images/icon/dollar-circle.svg" width="24" height="24" alt="svg icon">-->
<!--                                        </div>-->
<!--                                        <div class="flex-1">-->
<!--                                            <label for="garage2" class="font-recoleta block capitalize text-primary text-[18px] xl:text-[25px] leading-none mb-1">Garage</label>-->
<!--                                            <select name="garage" id="garage2" class="nice-select appearance-none bg-transparent text-tiny font-light cursor-pointer">-->
<!--                                                <option selected value="0">2 Garage</option>-->
<!--                                                <option value="1">2 Garage</option>-->
<!--                                                <option value="2">3 Garage</option>-->
<!--                                                <option value="3">4 Garage</option>-->
<!--                                            </select>-->
<!--                                        </div>-->

<!--                                    </div>-->

<!--                                    <div class="advanced-searrch-list flex items-center lg:border-r lg:border-[#D6D4D4] lg:mr-[40px] xl:mr-[50px] last:mr-0 last:border-r-0 mb-[45px] search-list">-->
<!--                                        <button class="search-properties-btn">-->
<!--                                            Search Properties-->
<!--                                        </button>-->
<!--                                    </div>-->

<!--                                </div>-->


<!--                            </form>-->
<!--                        </div>-->

<!--                        <div id="rent" class="tab-content bg-white border border-solid border-[#016450] border-opacity-25 rounded-bl-[15px] rounded-br-[15px] rounded-tr-[15px] px-[15px] sm:px-[30px] py-[40px]">-->
<!--                            <form action="#">-->
<!--                                <div class="advanced-searrch flex flex-wrap items-center -mb-[45px]">-->

<!--                                    <div class="advanced-searrch-list flex items-center lg:border-r lg:border-[#D6D4D4] lg:mr-[40px] xl:mr-[50px] last:mr-0 last:border-r-0 mb-[45px]">-->
<!--                                        <div class="mr-4 self-start shrink-0">-->
<!--                                            <img src="/static/images/icon/location.svg" width="24" height="24" alt="svg icon">-->
<!--                                        </div>-->
<!--                                        <div class="flex-1">-->
<!--                                            <label for="location7" class="font-recoleta block capitalize text-primary text-[18px] xl:text-[25px] leading-none mb-1">Location</label>-->
<!--                                            <input id="location7" type="text" placeholder="Choose location" class="text-tiny placeholder:text-body leading-none font-light pr-3 focus:outline-none w-full">-->
<!--                                        </div>-->
<!--                                    </div>-->

<!--                                    <div class="advanced-searrch-list flex items-center lg:border-r lg:border-[#D6D4D4] lg:mr-[40px] xl:mr-[50px] last:mr-0 last:border-r-0 mb-[45px]">-->
<!--                                        <div class="mr-4 self-start shrink-0">-->
<!--                                            <img src="/static/images/icon/property.svg" width="24" height="24" alt="svg icon">-->
<!--                                        </div>-->
<!--                                        <div class="flex-1">-->
<!--                                            <label for="property8" class="font-recoleta block capitalize text-primary text-[18px] xl:text-[25px] leading-none mb-1">Property-->
<!--                                                Type</label>-->
<!--                                            <select name="property" id="property8" class="nice-select appearance-none bg-transparent text-tiny font-light cursor-pointer">-->
<!--                                                <option selected value="0">Duplex House</option>-->
<!--                                                <option value="1">Duplex House 1</option>-->
<!--                                                <option value="2">Duplex House 2</option>-->
<!--                                                <option value="3">Duplex House 3</option>-->
<!--                                            </select>-->
<!--                                        </div>-->
<!--                                    </div>-->

<!--                                    <div class="advanced-searrch-list flex items-center lg:border-r lg:border-[#D6D4D4] lg:mr-[40px] xl:mr-[50px] last:mr-0 last:border-r-0 mb-[45px]">-->
<!--                                        <div class="mr-4 self-start shrink-0">-->
<!--                                            <img src="/static/images/icon/dollar-circle.svg" width="24" height="24" alt="svg icon">-->
<!--                                        </div>-->
<!--                                        <div class="flex-1">-->
<!--                                            <label for="price7" class="font-recoleta block capitalize text-primary text-[18px] xl:text-[25px] leading-none mb-1">Price-->
<!--                                                Range</label>-->
<!--                                            <select name="price" id="price7" class="nice-select appearance-none bg-transparent text-tiny font-light cursor-pointer">-->
<!--                                                <option selected value="0">1500 USD</option>-->
<!--                                                <option value="1">1600 USD</option>-->
<!--                                                <option value="2">1700 USD</option>-->
<!--                                                <option value="3">1800 USD</option>-->
<!--                                            </select>-->
<!--                                        </div>-->

<!--                                    </div>-->

<!--                                    <div class="advanced-searrch-list flex items-center lg:border-r lg:border-[#D6D4D4] lg:mr-[40px] xl:mr-[50px] last:mr-0 last:border-r-0 mb-[45px] relative">-->

<!--                                        <div class="mr-4 self-start shrink-0">-->
<!--                                            <img src="/static/images/icon/area.svg" width="24" height="24" alt="svg icon">-->
<!--                                        </div>-->

<!--                                        <div class="flex-1">-->
<!--                                            <label for="property-size9" class="font-recoleta block capitalize text-primary text-[18px] xl:text-[25px] leading-none mb-1">Property-->
<!--                                                Size</label>-->
<!--                                            <select name="property-size" id="property-size9" class="nice-select appearance-none bg-transparent text-tiny font-light cursor-pointer">-->
<!--                                                <option selected value="0">2500 Sqft</option>-->
<!--                                                <option value="1">2600 Sqft</option>-->
<!--                                                <option value="2">2700 Sqft</option>-->
<!--                                                <option value="3">2800 Sqft</option>-->
<!--                                            </select>-->
<!--                                        </div>-->
<!--                                        <button class="search-btn absolute right-0 lg:right-[-60px] xl:right-[-70px]">-->
<!--                                            <img src="/static/images/icon/search-outline.svg" class="max-w-[30px] xl:w-auto" width="40" height="40" alt="svg icon">-->
<!--                                            <span class="hidden">Search Properties</span>-->
<!--                                        </button>-->
<!--                                    </div>-->

<!--                                </div>-->



<!--                                <div class="advanced-searrch-hidden flex flex-wrap items-center mt-[45px] -mb-[45px]">-->

<!--                                    <div class="advanced-searrch-list flex items-center lg:border-r lg:border-[#D6D4D4] lg:mr-[40px] xl:mr-[50px] last:mr-0 last:border-r-0 mb-[45px] search-list">-->
<!--                                        <div class="mr-4 self-start shrink-0">-->
<!--                                            <img src="/static/images/icon/location.svg" width="24" height="24" alt="svg icon">-->
<!--                                        </div>-->
<!--                                        <div class="flex-1">-->
<!--                                            <label for="bedrooms6" class="font-recoleta block capitalize text-primary text-[18px] xl:text-[25px] leading-none mb-1">Bedrooms</label>-->
<!--                                            <select name="property" id="bedrooms6" class="nice-select appearance-none bg-transparent text-tiny font-light cursor-pointer">-->
<!--                                                <option selected value="0">Bedrooms</option>-->
<!--                                                <option value="1">kitchen</option>-->
<!--                                                <option value="2">dinning rooms</option>-->
<!--                                                <option value="3">Duplex House 3</option>-->
<!--                                            </select>-->
<!--                                        </div>-->
<!--                                    </div>-->

<!--                                    <div class="advanced-searrch-list flex items-center lg:border-r lg:border-[#D6D4D4] lg:mr-[40px] xl:mr-[50px] last:mr-0 last:border-r-0 mb-[45px] search-list">-->
<!--                                        <div class="mr-4 self-start shrink-0">-->
<!--                                            <img src="/static/images/icon/property.svg" width="24" height="24" alt="svg icon">-->
<!--                                        </div>-->
<!--                                        <div class="flex-1">-->
<!--                                            <label for="property7" class="font-recoleta block capitalize text-primary text-[18px] xl:text-[25px] leading-none mb-1">Bathrooms</label>-->
<!--                                            <select name="property" id="property7" class="nice-select appearance-none bg-transparent text-tiny font-light cursor-pointer">-->
<!--                                                <option selected value="0">Duplex House</option>-->
<!--                                                <option value="1">Duplex House 1</option>-->
<!--                                                <option value="2">Duplex House 2</option>-->
<!--                                                <option value="3">Duplex House 3</option>-->
<!--                                            </select>-->
<!--                                        </div>-->
<!--                                    </div>-->

<!--                                    <div class="advanced-searrch-list flex items-center lg:border-r lg:border-[#D6D4D4] lg:mr-[40px] xl:mr-[50px] last:mr-0 last:border-r-0 mb-[45px] search-list">-->
<!--                                        <div class="mr-4 self-start shrink-0">-->
<!--                                            <img src="/static/images/icon/dollar-circle.svg" width="24" height="24" alt="svg icon">-->
<!--                                        </div>-->
<!--                                        <div class="flex-1">-->
<!--                                            <label for="garage20" class="font-recoleta block capitalize text-primary text-[18px] xl:text-[25px] leading-none mb-1">Garage</label>-->
<!--                                            <select name="garage" id="garage20" class="nice-select appearance-none bg-transparent text-tiny font-light cursor-pointer">-->
<!--                                                <option selected value="0">2 Garage</option>-->
<!--                                                <option value="1">2 Garage</option>-->
<!--                                                <option value="2">3 Garage</option>-->
<!--                                                <option value="3">4 Garage</option>-->
<!--                                            </select>-->
<!--                                        </div>-->

<!--                                    </div>-->

<!--                                    <div class="advanced-searrch-list flex items-center lg:border-r lg:border-[#D6D4D4] lg:mr-[40px] xl:mr-[50px] last:mr-0 last:border-r-0 mb-[45px] search-list">-->
<!--                                        <button class="search-properties-btn">-->
<!--                                            Search Properties-->
<!--                                        </button>-->
<!--                                    </div>-->

<!--                                </div>-->


<!--                            </form>-->
<!--                        </div>-->
<!--                        <div id="co-living" class="tab-content bg-white border border-solid border-[#016450] border-opacity-25 rounded-bl-[15px] rounded-br-[15px] rounded-tr-[15px] px-[15px] sm:px-[30px] py-[40px]">-->
<!--                            <form action="#">-->
<!--                                <div class="advanced-searrch flex flex-wrap items-center -mb-[45px]">-->

<!--                                    <div class="advanced-searrch-list flex items-center lg:border-r lg:border-[#D6D4D4] lg:mr-[40px] xl:mr-[50px] last:mr-0 last:border-r-0 mb-[45px]">-->
<!--                                        <div class="mr-4 self-start shrink-0">-->
<!--                                            <img src="/static/images/icon/location.svg" width="24" height="24" alt="svg icon">-->
<!--                                        </div>-->
<!--                                        <div class="flex-1">-->
<!--                                            <label for="location6" class="font-recoleta block capitalize text-primary text-[18px] xl:text-[25px] leading-none mb-1">Location</label>-->
<!--                                            <input id="location6" type="text" placeholder="Choose location" class="text-tiny placeholder:text-body leading-none font-light pr-3 focus:outline-none w-full">-->
<!--                                        </div>-->
<!--                                    </div>-->

<!--                                    <div class="advanced-searrch-list flex items-center lg:border-r lg:border-[#D6D4D4] lg:mr-[40px] xl:mr-[50px] last:mr-0 last:border-r-0 mb-[45px]">-->
<!--                                        <div class="mr-4 self-start shrink-0">-->
<!--                                            <img src="/static/images/icon/property.svg" width="24" height="24" alt="svg icon">-->
<!--                                        </div>-->
<!--                                        <div class="flex-1">-->
<!--                                            <label for="property6" class="font-recoleta block capitalize text-primary text-[18px] xl:text-[25px] leading-none mb-1">Property-->
<!--                                                Type</label>-->
<!--                                            <select name="property" id="property6" class="nice-select appearance-none bg-transparent text-tiny font-light cursor-pointer">-->
<!--                                                <option selected value="0">Apartments</option>-->
<!--                                                <option value="1">Duplex House 1</option>-->
<!--                                                <option value="2">Duplex House 2</option>-->
<!--                                                <option value="3">Duplex House 3</option>-->
<!--                                            </select>-->
<!--                                        </div>-->
<!--                                    </div>-->

<!--                                    <div class="advanced-searrch-list flex items-center lg:border-r lg:border-[#D6D4D4] lg:mr-[40px] xl:mr-[50px] last:mr-0 last:border-r-0 mb-[45px]">-->
<!--                                        <div class="mr-4 self-start shrink-0">-->
<!--                                            <img src="/static/images/icon/dollar-circle.svg" width="24" height="24" alt="svg icon">-->
<!--                                        </div>-->
<!--                                        <div class="flex-1">-->
<!--                                            <label for="price6" class="font-recoleta block capitalize text-primary text-[18px] xl:text-[25px] leading-none mb-1">Price-->
<!--                                                Range</label>-->
<!--                                            <select name="price" id="price6" class="nice-select appearance-none bg-transparent text-tiny font-light cursor-pointer">-->
<!--                                                <option selected value="0">5500 USD</option>-->
<!--                                                <option value="1">5600 USD</option>-->
<!--                                                <option value="2">5700 USD</option>-->
<!--                                                <option value="3">5800 USD</option>-->
<!--                                            </select>-->
<!--                                        </div>-->

<!--                                    </div>-->

<!--                                    <div class="advanced-searrch-list flex items-center lg:border-r lg:border-[#D6D4D4] lg:mr-[40px] xl:mr-[50px] last:mr-0 last:border-r-0 mb-[45px] relative">-->

<!--                                        <div class="mr-4 self-start shrink-0">-->
<!--                                            <img src="/static/images/icon/area.svg" width="24" height="24" alt="svg icon">-->
<!--                                        </div>-->

<!--                                        <div class="flex-1">-->
<!--                                            <label for="property-size4" class="font-recoleta block capitalize text-primary text-[18px] xl:text-[25px] leading-none mb-1">Property-->
<!--                                                Size</label>-->
<!--                                            <select name="property-size" id="property-size4" class="nice-select appearance-none bg-transparent text-tiny font-light cursor-pointer">-->
<!--                                                <option selected value="0">3500 Sqft</option>-->
<!--                                                <option value="1">3600 Sqft</option>-->
<!--                                                <option value="2">3700 Sqft</option>-->
<!--                                                <option value="3">3800 Sqft</option>-->
<!--                                            </select>-->
<!--                                        </div>-->
<!--                                        <button class="search-btn absolute right-0 lg:right-[-60px] xl:right-[-70px]">-->
<!--                                            <img src="/static/images/icon/search-outline.svg" class="max-w-[30px] xl:w-auto" width="40" height="40" alt="svg icon">-->
<!--                                            <span class="hidden">Search Properties</span>-->
<!--                                        </button>-->
<!--                                    </div>-->

<!--                                </div>-->



<!--                                <div class="advanced-searrch-hidden flex flex-wrap items-center mt-[45px] -mb-[45px]">-->

<!--                                    <div class="advanced-searrch-list flex items-center lg:border-r lg:border-[#D6D4D4] lg:mr-[40px] xl:mr-[50px] last:mr-0 last:border-r-0 mb-[45px] search-list">-->
<!--                                        <div class="mr-4 self-start shrink-0">-->
<!--                                            <img src="/static/images/icon/location.svg" width="24" height="24" alt="svg icon">-->
<!--                                        </div>-->
<!--                                        <div class="flex-1">-->
<!--                                            <label for="bedrooms4" class="font-recoleta block capitalize text-primary text-[18px] xl:text-[25px] leading-none mb-1">Bedrooms</label>-->
<!--                                            <select name="property" id="bedrooms4" class="nice-select appearance-none bg-transparent text-tiny font-light cursor-pointer">-->
<!--                                                <option selected value="0">Bedrooms</option>-->
<!--                                                <option value="1">kitchen</option>-->
<!--                                                <option value="2">dinning rooms</option>-->
<!--                                                <option value="3">Duplex House 3</option>-->
<!--                                            </select>-->
<!--                                        </div>-->
<!--                                    </div>-->

<!--                                    <div class="advanced-searrch-list flex items-center lg:border-r lg:border-[#D6D4D4] lg:mr-[40px] xl:mr-[50px] last:mr-0 last:border-r-0 mb-[45px] search-list">-->
<!--                                        <div class="mr-4 self-start shrink-0">-->
<!--                                            <img src="/static/images/icon/property.svg" width="24" height="24" alt="svg icon">-->
<!--                                        </div>-->
<!--                                        <div class="flex-1">-->
<!--                                            <label for="property4" class="font-recoleta block capitalize text-primary text-[18px] xl:text-[25px] leading-none mb-1">Bathrooms</label>-->
<!--                                            <select name="property" id="property4" class="nice-select appearance-none bg-transparent text-tiny font-light cursor-pointer">-->
<!--                                                <option selected value="0">Duplex House</option>-->
<!--                                                <option value="1">Duplex House 1</option>-->
<!--                                                <option value="2">Duplex House 2</option>-->
<!--                                                <option value="3">Duplex House 3</option>-->
<!--                                            </select>-->
<!--                                        </div>-->
<!--                                    </div>-->

<!--                                    <div class="advanced-searrch-list flex items-center lg:border-r lg:border-[#D6D4D4] lg:mr-[40px] xl:mr-[50px] last:mr-0 last:border-r-0 mb-[45px] search-list">-->
<!--                                        <div class="mr-4 self-start shrink-0">-->
<!--                                            <img src="/static/images/icon/dollar-circle.svg" width="24" height="24" alt="svg icon">-->
<!--                                        </div>-->
<!--                                        <div class="flex-1">-->
<!--                                            <label for="garage4" class="font-recoleta block capitalize text-primary text-[18px] xl:text-[25px] leading-none mb-1">Garage</label>-->
<!--                                            <select name="garage" id="garage4" class="nice-select appearance-none bg-transparent text-tiny font-light cursor-pointer">-->
<!--                                                <option selected value="0">2 Garage</option>-->
<!--                                                <option value="1">2 Garage</option>-->
<!--                                                <option value="2">3 Garage</option>-->
<!--                                                <option value="3">4 Garage</option>-->
<!--                                            </select>-->
<!--                                        </div>-->

<!--                                    </div>-->

<!--                                    <div class="advanced-searrch-list flex items-center lg:border-r lg:border-[#D6D4D4] lg:mr-[40px] xl:mr-[50px] last:mr-0 last:border-r-0 mb-[45px] search-list">-->
<!--                                        <button class="search-properties-btn">-->
<!--                                            Search Properties-->
<!--                                        </button>-->
<!--                                    </div>-->

<!--                                </div>-->


<!--                            </form>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
        <!-- Addvanced search tab end -->


        <!-- Popular Properties start -->
        <section class="popular-properties py-[80px] lg:py-[120px]">
            <div class="container">
                <div class="grid grid-cols-12">
                    <div class="col-span-12"> <span class="text-secondary text-tiny inline-block mb-2">Best Choice</span></div>
                    <div class="col-span-12">
                        <div class="flex flex-col sm:flex-row items-start justify-between mb-[50px]">
                            <div>

                                <h2 class="font-recoleta text-primary text-[24px] sm:text-[30px] xl:text-xl capitalize">
                                    推荐房源<span class="text-secondary">.</span></h2>
                            </div>
                            <div>
                                <a href="properties-v1.html" class="flex flex-wrap items-center text-secondary text-tiny">查看更多好房
                                    <svg class="ml-[10px]" width="26" height="11" viewBox="0 0 26 11" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M20.0877 0.69303L24.2075 5.00849H0V5.99151H24.2075L20.0877 10.307L20.7493 11L26 5.5L20.7493 0L20.0877 0.69303Z" fill="currentColor" />
                                    </svg>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-[30px]">

                    <div class="overflow-hidden rounded-md drop-shadow-[0px_2px_15px_rgba(0,0,0,0.1)] bg-[#FFFDFC] text-center transition-all duration-300 hover:-translate-y-[10px]">
                        <div class="relative">
                            <a href="properties-details.html" class="block">
                                <img src="/static/images/properties/properties1.jpg" class="w-full h-full" loading="lazy" width="370" height="266" alt="Orchid Casel de Paradise.">
                            </a>
                            <div class="flex flex-wrap flex-col absolute top-5 right-5">
                                <button class="flex flex-wrap items-center bg-[rgb(1,97,78,0.8)] p-[5px] rounded-[2px] text-white mb-[5px] text-xs"><img class="mr-1" src="/static/images/icon/camera.png" loading="lazy" width="13" height="10" alt="camera icon">07</button>
                                <button class="flex flex-wrap items-center bg-[rgb(1,97,78,0.8)] p-[5px] rounded-[2px] text-white text-xs"><img class="mr-1" src="/static/images/icon/video.png" loading="lazy" width="14" height="10" alt="camera icon">08</button>
                            </div>
                            <span class="absolute bottom-5 left-5 bg-[#FFFDFC] p-[5px] rounded-[2px] text-secondary leading-none text-[14px] font-normal capitalize">for Sale</span>
                        </div>

                        <div class="py-[20px] px-[20px]">
                            <h3><a href="properties-details.html" class="font-recoleta leading-tight text-[22px] xl:text-lg text-primary">Orchid Casel de Paradise.</a></h3>
                            <h4><a href="properties-details.html" class="font-light text-tiny text-secondary underline">18B Central Street, San Francisco</a></h4>
                            <span class="font-light text-sm">Added: 25 November, 2021</span>
                            <div class="before:block before:absolute before:top-1/2 before:-translate-y-1/2 before:h-[1px] before:w-full before:z-[-1] before:bg-[#E0E0E0] relative"><span class="font-recoleta text-base text-primary px-[15px] bg-white">Price: $255300</span></div>
                            <p class="font-light">1230 Sq.fit - 4 Bed - 3 Bath - 2 Garage</p>
                        </div>
                    </div>
                    <div class="overflow-hidden rounded-md drop-shadow-[0px_2px_15px_rgba(0,0,0,0.1)] bg-[#FFFDFC] text-center transition-all duration-300 hover:-translate-y-[10px]">
                        <div class="relative">
                            <a href="properties-details.html" class="block">
                                <img src="/static/images/properties/properties2.jpg" class="w-full h-full" loading="lazy" width="370" height="266" alt="Ruposibangla de parlosia.">
                            </a>
                            <div class="flex flex-wrap flex-col absolute top-5 right-5">
                                <button class="flex flex-wrap items-center bg-[rgb(1,97,78,0.8)] p-[5px] rounded-[2px] text-white mb-[5px] text-xs"><img class="mr-1" src="/static/images/icon/camera.png" loading="lazy" width="13" height="10" alt="camera icon">07</button>
                                <button class="flex flex-wrap items-center bg-[rgb(1,97,78,0.8)] p-[5px] rounded-[2px] text-white text-xs"><img class="mr-1" src="/static/images/icon/video.png" loading="lazy" width="14" height="10" alt="camera icon">08</button>
                            </div>
                            <span class="absolute bottom-5 left-5 bg-[#FFFDFC] p-[5px] rounded-[2px] text-secondary leading-none text-[14px] font-normal capitalize">for Rent</span>
                        </div>

                        <div class="py-[20px] px-[20px]">
                            <h3><a href="properties-details.html" class="font-recoleta leading-tight text-[22px] xl:text-lg text-primary">Ruposibangla de parlosia.</a></h3>
                            <h4><a href="properties-details.html" class="font-light text-tiny text-secondary underline">18B Central Street, San Francisco</a></h4>
                            <span class="font-light text-sm">Added: 25 November, 2021</span>
                            <div class="before:block before:absolute before:top-1/2 before:-translate-y-1/2 before:h-[1px] before:w-full before:z-[-1] before:bg-[#E0E0E0] relative"><span class="font-recoleta text-base text-primary px-[15px] bg-white">Price: $255300</span></div>
                            <p class="font-light">1800 Sq.fit - 5 Bed - 3 Bath - 2 Garage</p>
                        </div>
                    </div>
                    <div class="overflow-hidden rounded-md drop-shadow-[0px_2px_15px_rgba(0,0,0,0.1)] bg-[#FFFDFC] text-center transition-all duration-300 hover:-translate-y-[10px]">
                        <div class="relative">
                            <a href="properties-details.html" class="block">
                                <img src="/static/images/properties/properties3.jpg" class="w-full h-full" loading="lazy" width="370" height="266" alt="Sinomen Studio Palace.">
                            </a>
                            <div class="flex flex-wrap flex-col absolute top-5 right-5">
                                <button class="flex flex-wrap items-center bg-[rgb(1,97,78,0.8)] p-[5px] rounded-[2px] text-white mb-[5px] text-xs"><img class="mr-1" src="/static/images/icon/camera.png" loading="lazy" width="13" height="10" alt="camera icon">07</button>
                                <button class="flex flex-wrap items-center bg-[rgb(1,97,78,0.8)] p-[5px] rounded-[2px] text-white text-xs"><img class="mr-1" src="/static/images/icon/video.png" loading="lazy" width="14" height="10" alt="camera icon">08</button>
                            </div>
                            <span class="absolute bottom-5 left-5 bg-[#FFFDFC] p-[5px] rounded-[2px] text-secondary leading-none text-[14px] font-normal capitalize">for Sale</span>
                        </div>

                        <div class="py-[20px] px-[20px]">
                            <h3><a href="properties-details.html" class="font-recoleta leading-tight text-[22px] xl:text-lg text-primary">Sinomen Studio Palace.</a></h3>
                            <h4><a href="properties-details.html" class="font-light text-tiny text-secondary underline">194 Mercer Street, 627 Broadway, New York</a></h4>
                            <span class="font-light text-sm">Added: 25 November, 2021</span>
                            <div class="before:block before:absolute before:top-1/2 before:-translate-y-1/2 before:h-[1px] before:w-full before:z-[-1] before:bg-[#E0E0E0] relative"><span class="font-recoleta text-base text-primary px-[15px] bg-white">Price: $255300</span></div>
                            <p class="font-light">1230 Sq.fit - 4 Bed - 3 Bath - 2 Garage</p>
                        </div>
                    </div>

                </div>

            </div>
        </section>
        <!-- Popular Properties end -->





        <!-- Featured Properties Start -->
        <section class="featured-properties py-[80px] lg:py-[120px]">
            <div class="container">
                <div class="grid grid-cols-12">

                    <div class="col-span-12 flex flex-wrap flex-col md:flex-row items-start justify-between mb-[50px]">
                        <div class="mb-5 lg:mb-0">

                            <h2 class="font-recoleta text-primary text-[24px] sm:text-[30px] xl:text-xl capitalize">
                                最新好房<span class="text-secondary">.</span></h2>
                        </div>

                    </div>
                    <div class="col-span-12">
                        <div id="all-properties" class="properties-tab-content active">
                            <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-[30px]">

                                <div class="overflow-hidden rounded-md drop-shadow-[0px_2px_15px_rgba(0,0,0,0.1)] bg-[#FFFDFC] text-center transition-all duration-300 hover:-translate-y-[10px]">
                                    <div class="relative">
                                        <a href="properties-details.html" class="block">
                                            <img src="/static/images/properties/properties4.jpg" class="w-full h-full" loading="lazy" width="370" height="266" alt="Elite Garden Resedence.">
                                        </a>
                                        <div class="flex flex-wrap flex-col absolute top-5 right-5">
                                            <button class="flex flex-wrap items-center bg-[rgb(1,97,78,0.8)] p-[5px] rounded-[2px] text-white mb-[5px] text-xs"><img class="mr-1" src="/static/images/icon/camera.png" loading="lazy" width="13" height="10" alt="camera icon">07</button>
                                            <button class="flex flex-wrap items-center bg-[rgb(1,97,78,0.8)] p-[5px] rounded-[2px] text-white text-xs"><img class="mr-1" src="/static/images/icon/video.png" loading="lazy" width="14" height="10" alt="camera icon">08</button>
                                        </div>
                                        <span class="absolute bottom-5 left-5 bg-[#FFFDFC] p-[5px] rounded-[2px] text-secondary leading-none text-[14px] font-normal capitalize">for Sale</span>
                                    </div>

                                    <div class="py-[20px] px-[20px]">
                                        <h3><a href="properties-details.html" class="font-recoleta leading-tight text-[22px] xl:text-lg text-primary">Elite Garden Resedence.</a></h3>
                                        <h4><a href="properties-details.html" class="font-light text-tiny text-secondary underline">253 Montril Street, South Town, Miami</a></h4>
                                        <span class="font-light text-sm">Added: 25 November, 2021</span>
                                        <div class="before:block before:absolute before:top-1/2 before:-translate-y-1/2 before:h-[1px] before:w-full before:z-[-1] before:bg-[#E0E0E0] relative"><span class="font-recoleta text-base text-primary px-[15px] bg-white">Price: $255300</span></div>
                                        <p class="font-light">1230 Sq.fit - 4 Bed - 3 Bath - 2 Garage</p>
                                    </div>
                                </div>
                                <div class="overflow-hidden rounded-md drop-shadow-[0px_2px_15px_rgba(0,0,0,0.1)] bg-[#FFFDFC] text-center transition-all duration-300 hover:-translate-y-[10px]">
                                    <div class="relative">
                                        <a href="properties-details.html" class="block">
                                            <img src="/static/images/properties/properties5.jpg" class="w-full h-full" loading="lazy" width="370" height="266" alt="De Parasiya Appartment.">
                                        </a>
                                        <div class="flex flex-wrap flex-col absolute top-5 right-5">
                                            <button class="flex flex-wrap items-center bg-[rgb(1,97,78,0.8)] p-[5px] rounded-[2px] text-white mb-[5px] text-xs"><img class="mr-1" src="/static/images/icon/camera.png" loading="lazy" width="13" height="10" alt="camera icon">07</button>
                                            <button class="flex flex-wrap items-center bg-[rgb(1,97,78,0.8)] p-[5px] rounded-[2px] text-white text-xs"><img class="mr-1" src="/static/images/icon/video.png" loading="lazy" width="14" height="10" alt="camera icon">08</button>
                                        </div>
                                        <span class="absolute bottom-5 left-5 bg-[#FFFDFC] p-[5px] rounded-[2px] text-secondary leading-none text-[14px] font-normal capitalize">for Co-living</span>
                                    </div>

                                    <div class="py-[20px] px-[20px]">
                                        <h3><a href="properties-details.html" class="font-recoleta leading-tight text-[22px] xl:text-lg text-primary">De Parasiya Appartment.</a></h3>
                                        <h4><a href="properties-details.html" class="font-light text-tiny text-secondary underline">18B Central Street, San Francisco</a></h4>
                                        <span class="font-light text-sm">Added: 25 November, 2021</span>
                                        <div class="before:block before:absolute before:top-1/2 before:-translate-y-1/2 before:h-[1px] before:w-full before:z-[-1] before:bg-[#E0E0E0] relative"><span class="font-recoleta text-base text-primary px-[15px] bg-white">Price: $255300</span></div>
                                        <p class="font-light">1800 Sq.fit - 5 Bed - 3 Bath - 2 Garage</p>
                                    </div>
                                </div>
                                <div class="overflow-hidden rounded-md drop-shadow-[0px_2px_15px_rgba(0,0,0,0.1)] bg-[#FFFDFC] text-center transition-all duration-300 hover:-translate-y-[10px]">
                                    <div class="relative">
                                        <a href="properties-details.html" class="block">
                                            <img src="/static/images/properties/properties6.jpg" class="w-full h-full" loading="lazy" width="370" height="266" alt="Duplex de Villa.">
                                        </a>
                                        <div class="flex flex-wrap flex-col absolute top-5 right-5">
                                            <button class="flex flex-wrap items-center bg-[rgb(1,97,78,0.8)] p-[5px] rounded-[2px] text-white mb-[5px] text-xs"><img class="mr-1" src="/static/images/icon/camera.png" loading="lazy" width="13" height="10" alt="camera icon">07</button>
                                            <button class="flex flex-wrap items-center bg-[rgb(1,97,78,0.8)] p-[5px] rounded-[2px] text-white text-xs"><img class="mr-1" src="/static/images/icon/video.png" loading="lazy" width="14" height="10" alt="camera icon">08</button>
                                        </div>
                                        <span class="absolute bottom-5 left-5 bg-[#FFFDFC] p-[5px] rounded-[2px] text-secondary leading-none text-[14px] font-normal capitalize">for Sale</span>
                                    </div>

                                    <div class="py-[20px] px-[20px]">
                                        <h3><a href="properties-details.html" class="font-recoleta leading-tight text-[22px] xl:text-lg text-primary">Duplex de Villa.</a></h3>
                                        <h4><a href="properties-details.html" class="font-light text-tiny text-secondary underline">194 Mercer Street, 627 Broadway, New York</a></h4>
                                        <span class="font-light text-sm">Added: 25 November, 2021</span>
                                        <div class="before:block before:absolute before:top-1/2 before:-translate-y-1/2 before:h-[1px] before:w-full before:z-[-1] before:bg-[#E0E0E0] relative"><span class="font-recoleta text-base text-primary px-[15px] bg-white">Price: $255300</span></div>
                                        <p class="font-light">1800 Sq.fit - 5 Bed - 3 Bath - 2 Garage</p>
                                    </div>
                                </div>
                                <div class="overflow-hidden rounded-md drop-shadow-[0px_2px_15px_rgba(0,0,0,0.1)] bg-[#FFFDFC] text-center transition-all duration-300 hover:-translate-y-[10px]">
                                    <div class="relative">
                                        <a href="properties-details.html" class="block">
                                            <img src="/static/images/properties/properties7.jpg" class="w-full h-full" loading="lazy" width="370" height="266" alt="Orchid Casel de Paradise.">
                                        </a>
                                        <div class="flex flex-wrap flex-col absolute top-5 right-5">
                                            <button class="flex flex-wrap items-center bg-[rgb(1,97,78,0.8)] p-[5px] rounded-[2px] text-white mb-[5px] text-xs"><img class="mr-1" src="/static/images/icon/camera.png" loading="lazy" width="13" height="10" alt="camera icon">07</button>
                                            <button class="flex flex-wrap items-center bg-[rgb(1,97,78,0.8)] p-[5px] rounded-[2px] text-white text-xs"><img class="mr-1" src="/static/images/icon/video.png" loading="lazy" width="14" height="10" alt="camera icon">08</button>
                                        </div>
                                        <span class="absolute bottom-5 left-5 bg-[#FFFDFC] p-[5px] rounded-[2px] text-secondary leading-none text-[14px] font-normal capitalize">for Sale</span>
                                    </div>

                                    <div class="py-[20px] px-[20px]">
                                        <h3><a href="properties-details.html" class="font-recoleta leading-tight text-[22px] xl:text-lg text-primary">Orchid Casel de Paradise.</a></h3>
                                        <h4><a href="properties-details.html" class="font-light text-tiny text-secondary underline">2846 West Side Avenue, New Jersey</a></h4>
                                        <span class="font-light text-sm">Added: 25 November, 2021</span>
                                        <div class="before:block before:absolute before:top-1/2 before:-translate-y-1/2 before:h-[1px] before:w-full before:z-[-1] before:bg-[#E0E0E0] relative"><span class="font-recoleta text-base text-primary px-[15px] bg-white">Price: $255300</span></div>
                                        <p class="font-light">1230 Sq.fit - 4 Bed - 3 Bath - 2 Garage</p>
                                    </div>
                                </div>
                                <div class="overflow-hidden rounded-md drop-shadow-[0px_2px_15px_rgba(0,0,0,0.1)] bg-[#FFFDFC] text-center transition-all duration-300 hover:-translate-y-[10px]">
                                    <div class="relative">
                                        <a href="properties-details.html" class="block">
                                            <img src="/static/images/properties/properties3.jpg" class="w-full h-full" loading="lazy" width="370" height="266" alt="Ruposibangla de parlosia.">
                                        </a>
                                        <div class="flex flex-wrap flex-col absolute top-5 right-5">
                                            <button class="flex flex-wrap items-center bg-[rgb(1,97,78,0.8)] p-[5px] rounded-[2px] text-white mb-[5px] text-xs"><img class="mr-1" src="/static/images/icon/camera.png" loading="lazy" width="13" height="10" alt="camera icon">07</button>
                                            <button class="flex flex-wrap items-center bg-[rgb(1,97,78,0.8)] p-[5px] rounded-[2px] text-white text-xs"><img class="mr-1" src="/static/images/icon/video.png" loading="lazy" width="14" height="10" alt="camera icon">08</button>
                                        </div>
                                        <span class="absolute bottom-5 left-5 bg-[#FFFDFC] p-[5px] rounded-[2px] text-secondary leading-none text-[14px] font-normal capitalize">for Rent</span>
                                    </div>

                                    <div class="py-[20px] px-[20px]">
                                        <h3><a href="properties-details.html" class="font-recoleta leading-tight text-[22px] xl:text-lg text-primary">Ruposibangla de parlosia.</a></h3>
                                        <h4><a href="properties-details.html" class="font-light text-tiny text-secondary underline">2381 Richards Avenue, Stockton, California</a></h4>
                                        <span class="font-light text-sm">Added: 25 November, 2021</span>
                                        <div class="before:block before:absolute before:top-1/2 before:-translate-y-1/2 before:h-[1px] before:w-full before:z-[-1] before:bg-[#E0E0E0] relative"><span class="font-recoleta text-base text-primary px-[15px] bg-white">Price: $255300</span></div>
                                        <p class="font-light">1230 Sq.fit - 4 Bed - 3 Bath - 2 Garage</p>
                                    </div>
                                </div>
                                <div class="overflow-hidden rounded-md drop-shadow-[0px_2px_15px_rgba(0,0,0,0.1)] bg-[#FFFDFC] text-center transition-all duration-300 hover:-translate-y-[10px]">
                                    <div class="relative">
                                        <a href="properties-details.html" class="block">
                                            <img src="/static/images/properties/properties3.jpg" class="w-full h-full" loading="lazy" width="370" height="266" alt="Sinomen Studio Palace.">
                                        </a>
                                        <div class="flex flex-wrap flex-col absolute top-5 right-5">
                                            <button class="flex flex-wrap items-center bg-[rgb(1,97,78,0.8)] p-[5px] rounded-[2px] text-white mb-[5px] text-xs"><img class="mr-1" src="/static/images/icon/camera.png" loading="lazy" width="13" height="10" alt="camera icon">07</button>
                                            <button class="flex flex-wrap items-center bg-[rgb(1,97,78,0.8)] p-[5px] rounded-[2px] text-white text-xs"><img class="mr-1" src="/static/images/icon/video.png" loading="lazy" width="14" height="10" alt="camera icon">08</button>
                                        </div>
                                        <span class="absolute bottom-5 left-5 bg-[#FFFDFC] p-[5px] rounded-[2px] text-secondary leading-none text-[14px] font-normal capitalize">for Sale</span>
                                    </div>

                                    <div class="py-[20px] px-[20px]">
                                        <h3><a href="properties-details.html" class="font-recoleta leading-tight text-[22px] xl:text-lg text-primary">Sinomen Studio Palace.</a></h3>
                                        <h4><a href="properties-details.html" class="font-light text-tiny text-secondary underline">4658 Oakwood Avenue, New York</a></h4>
                                        <span class="font-light text-sm">Added: 25 November, 2021</span>
                                        <div class="before:block before:absolute before:top-1/2 before:-translate-y-1/2 before:h-[1px] before:w-full before:z-[-1] before:bg-[#E0E0E0] relative"><span class="font-recoleta text-base text-primary px-[15px] bg-white">Price: $255300</span></div>
                                        <p class="font-light">1230 Sq.fit - 4 Bed - 3 Bath - 2 Garage</p>
                                    </div>
                                </div>

                            </div>
                        </div>


                        <div id="ForBuy" class="properties-tab-content">
                            <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-[30px]">

                                <div class="overflow-hidden rounded-md drop-shadow-[0px_2px_15px_rgba(0,0,0,0.1)] bg-[#FFFDFC] text-center transition-all duration-300 hover:-translate-y-[10px]">
                                    <div class="relative">
                                        <a href="properties-details.html" class="block">
                                            <img src="/static/images/properties/properties1.jpg" class="w-full h-full" loading="lazy" width="370" height="266" alt="Elite Garden Resedence.">
                                        </a>
                                        <div class="flex flex-wrap flex-col absolute top-5 right-5">
                                            <button class="flex flex-wrap items-center bg-[rgb(1,97,78,0.8)] p-[5px] rounded-[2px] text-white mb-[5px] text-xs"><img class="mr-1" src="/static/images/icon/camera.png" loading="lazy" width="13" height="10" alt="camera icon">07</button>
                                            <button class="flex flex-wrap items-center bg-[rgb(1,97,78,0.8)] p-[5px] rounded-[2px] text-white text-xs"><img class="mr-1" src="/static/images/icon/video.png" loading="lazy" width="14" height="10" alt="camera icon">08</button>
                                        </div>
                                        <span class="absolute bottom-5 left-5 bg-[#FFFDFC] p-[5px] rounded-[2px] text-secondary leading-none text-[14px] font-normal capitalize">for Sale</span>
                                    </div>

                                    <div class="py-[20px] px-[20px]">
                                        <h3><a href="properties-details.html" class="font-recoleta leading-tight text-[22px] xl:text-lg text-primary">Elite Garden Resedence.</a></h3>
                                        <h4><a href="properties-details.html" class="font-light text-tiny text-secondary underline">253 Montril Street, South Town, Miami</a></h4>
                                        <span class="font-light text-sm">Added: 25 November, 2021</span>
                                        <div class="before:block before:absolute before:top-1/2 before:-translate-y-1/2 before:h-[1px] before:w-full before:z-[-1] before:bg-[#E0E0E0] relative"><span class="font-recoleta text-base text-primary px-[15px] bg-white">Price: $255300</span></div>
                                        <p class="font-light">1230 Sq.fit - 4 Bed - 3 Bath - 2 Garage</p>
                                    </div>
                                </div>
                                <div class="overflow-hidden rounded-md drop-shadow-[0px_2px_15px_rgba(0,0,0,0.1)] bg-[#FFFDFC] text-center transition-all duration-300 hover:-translate-y-[10px]">
                                    <div class="relative">
                                        <a href="properties-details.html" class="block">
                                            <img src="/static/images/properties/properties3.jpg" class="w-full h-full" loading="lazy" width="370" height="266" alt="De Parasiya Appartment.">
                                        </a>
                                        <div class="flex flex-wrap flex-col absolute top-5 right-5">
                                            <button class="flex flex-wrap items-center bg-[rgb(1,97,78,0.8)] p-[5px] rounded-[2px] text-white mb-[5px] text-xs"><img class="mr-1" src="/static/images/icon/camera.png" loading="lazy" width="13" height="10" alt="camera icon">07</button>
                                            <button class="flex flex-wrap items-center bg-[rgb(1,97,78,0.8)] p-[5px] rounded-[2px] text-white text-xs"><img class="mr-1" src="/static/images/icon/video.png" loading="lazy" width="14" height="10" alt="camera icon">08</button>
                                        </div>
                                        <span class="absolute bottom-5 left-5 bg-[#FFFDFC] p-[5px] rounded-[2px] text-secondary leading-none text-[14px] font-normal capitalize">for Sale</span>
                                    </div>

                                    <div class="py-[20px] px-[20px]">
                                        <h3><a href="properties-details.html" class="font-recoleta leading-tight text-[22px] xl:text-lg text-primary">De Parasiya Appartment.</a></h3>
                                        <h4><a href="properties-details.html" class="font-light text-tiny text-secondary underline">18B Central Street, San Francisco</a></h4>
                                        <span class="font-light text-sm">Added: 25 November, 2021</span>
                                        <div class="before:block before:absolute before:top-1/2 before:-translate-y-1/2 before:h-[1px] before:w-full before:z-[-1] before:bg-[#E0E0E0] relative"><span class="font-recoleta text-base text-primary px-[15px] bg-white">Price: $255300</span></div>
                                        <p class="font-light">1800 Sq.fit - 5 Bed - 3 Bath - 2 Garage</p>
                                    </div>
                                </div>
                                <div class="overflow-hidden rounded-md drop-shadow-[0px_2px_15px_rgba(0,0,0,0.1)] bg-[#FFFDFC] text-center transition-all duration-300 hover:-translate-y-[10px]">
                                    <div class="relative">
                                        <a href="properties-details.html" class="block">
                                            <img src="/static/images/properties/properties6.jpg" class="w-full h-full" loading="lazy" width="370" height="266" alt="Duplex de Villa.">
                                        </a>
                                        <div class="flex flex-wrap flex-col absolute top-5 right-5">
                                            <button class="flex flex-wrap items-center bg-[rgb(1,97,78,0.8)] p-[5px] rounded-[2px] text-white mb-[5px] text-xs"><img class="mr-1" src="/static/images/icon/camera.png" loading="lazy" width="13" height="10" alt="camera icon">07</button>
                                            <button class="flex flex-wrap items-center bg-[rgb(1,97,78,0.8)] p-[5px] rounded-[2px] text-white text-xs"><img class="mr-1" src="/static/images/icon/video.png" loading="lazy" width="14" height="10" alt="camera icon">08</button>
                                        </div>
                                        <span class="absolute bottom-5 left-5 bg-[#FFFDFC] p-[5px] rounded-[2px] text-secondary leading-none text-[14px] font-normal capitalize">for Rent</span>
                                    </div>

                                    <div class="py-[20px] px-[20px]">
                                        <h3><a href="properties-details.html" class="font-recoleta leading-tight text-[22px] xl:text-lg text-primary">Duplex de Villa.</a></h3>
                                        <h4><a href="properties-details.html" class="font-light text-tiny text-secondary underline">194 Mercer Street, 627 Broadway, New York</a></h4>
                                        <span class="font-light text-sm">Added: 25 November, 2021</span>
                                        <div class="before:block before:absolute before:top-1/2 before:-translate-y-1/2 before:h-[1px] before:w-full before:z-[-1] before:bg-[#E0E0E0] relative"><span class="font-recoleta text-base text-primary px-[15px] bg-white">Price: $255300</span></div>
                                        <p class="font-light">1800 Sq.fit - 5 Bed - 3 Bath - 2 Garage</p>
                                    </div>
                                </div>
                                <div class="overflow-hidden rounded-md drop-shadow-[0px_2px_15px_rgba(0,0,0,0.1)] bg-[#FFFDFC] text-center transition-all duration-300 hover:-translate-y-[10px]">
                                    <div class="relative">
                                        <a href="properties-details.html" class="block">
                                            <img src="/static/images/properties/properties4.jpg" class="w-full h-full" loading="lazy" width="370" height="266" alt="Orchid Casel de Paradise.">
                                        </a>
                                        <div class="flex flex-wrap flex-col absolute top-5 right-5">
                                            <button class="flex flex-wrap items-center bg-[rgb(1,97,78,0.8)] p-[5px] rounded-[2px] text-white mb-[5px] text-xs"><img class="mr-1" src="/static/images/icon/camera.png" loading="lazy" width="13" height="10" alt="camera icon">07</button>
                                            <button class="flex flex-wrap items-center bg-[rgb(1,97,78,0.8)] p-[5px] rounded-[2px] text-white text-xs"><img class="mr-1" src="/static/images/icon/video.png" loading="lazy" width="14" height="10" alt="camera icon">08</button>
                                        </div>
                                        <span class="absolute bottom-5 left-5 bg-[#FFFDFC] p-[5px] rounded-[2px] text-secondary leading-none text-[14px] font-normal capitalize">for Sale</span>
                                    </div>

                                    <div class="py-[20px] px-[20px]">
                                        <h3><a href="properties-details.html" class="font-recoleta leading-tight text-[22px] xl:text-lg text-primary">Orchid Casel de Paradise.</a></h3>
                                        <h4><a href="properties-details.html" class="font-light text-tiny text-secondary underline">2846 West Side Avenue, New Jersey</a></h4>
                                        <span class="font-light text-sm">Added: 25 November, 2021</span>
                                        <div class="before:block before:absolute before:top-1/2 before:-translate-y-1/2 before:h-[1px] before:w-full before:z-[-1] before:bg-[#E0E0E0] relative"><span class="font-recoleta text-base text-primary px-[15px] bg-white">Price: $255300</span></div>
                                        <p class="font-light">1230 Sq.fit - 4 Bed - 3 Bath - 2 Garage</p>
                                    </div>
                                </div>
                                <div class="overflow-hidden rounded-md drop-shadow-[0px_2px_15px_rgba(0,0,0,0.1)] bg-[#FFFDFC] text-center transition-all duration-300 hover:-translate-y-[10px]">
                                    <div class="relative">
                                        <a href="properties-details.html" class="block">
                                            <img src="/static/images/properties/properties5.jpg" class="w-full h-full" loading="lazy" width="370" height="266" alt="Ruposibangla de parlosia.">
                                        </a>
                                        <div class="flex flex-wrap flex-col absolute top-5 right-5">
                                            <button class="flex flex-wrap items-center bg-[rgb(1,97,78,0.8)] p-[5px] rounded-[2px] text-white mb-[5px] text-xs"><img class="mr-1" src="/static/images/icon/camera.png" loading="lazy" width="13" height="10" alt="camera icon">07</button>
                                            <button class="flex flex-wrap items-center bg-[rgb(1,97,78,0.8)] p-[5px] rounded-[2px] text-white text-xs"><img class="mr-1" src="/static/images/icon/video.png" loading="lazy" width="14" height="10" alt="camera icon">08</button>
                                        </div>
                                        <span class="absolute bottom-5 left-5 bg-[#FFFDFC] p-[5px] rounded-[2px] text-secondary leading-none text-[14px] font-normal capitalize">for Sale</span>
                                    </div>

                                    <div class="py-[20px] px-[20px]">
                                        <h3><a href="properties-details.html" class="font-recoleta leading-tight text-[22px] xl:text-lg text-primary">Ruposibangla de parlosia.</a></h3>
                                        <h4><a href="properties-details.html" class="font-light text-tiny text-secondary underline">2381 Richards Avenue, Stockton, California</a></h4>
                                        <span class="font-light text-sm">Added: 25 November, 2021</span>
                                        <div class="before:block before:absolute before:top-1/2 before:-translate-y-1/2 before:h-[1px] before:w-full before:z-[-1] before:bg-[#E0E0E0] relative"><span class="font-recoleta text-base text-primary px-[15px] bg-white">Price: $255300</span></div>
                                        <p class="font-light">1230 Sq.fit - 4 Bed - 3 Bath - 2 Garage</p>
                                    </div>
                                </div>
                                <div class="overflow-hidden rounded-md drop-shadow-[0px_2px_15px_rgba(0,0,0,0.1)] bg-[#FFFDFC] text-center transition-all duration-300 hover:-translate-y-[10px]">
                                    <div class="relative">
                                        <a href="properties-details.html" class="block">
                                            <img src="/static/images/properties/properties3.jpg" class="w-full h-full" loading="lazy" width="370" height="266" alt="Sinomen Studio Palace.">
                                        </a>
                                        <div class="flex flex-wrap flex-col absolute top-5 right-5">
                                            <button class="flex flex-wrap items-center bg-[rgb(1,97,78,0.8)] p-[5px] rounded-[2px] text-white mb-[5px] text-xs"><img class="mr-1" src="/static/images/icon/camera.png" loading="lazy" width="13" height="10" alt="camera icon">07</button>
                                            <button class="flex flex-wrap items-center bg-[rgb(1,97,78,0.8)] p-[5px] rounded-[2px] text-white text-xs"><img class="mr-1" src="/static/images/icon/video.png" loading="lazy" width="14" height="10" alt="camera icon">08</button>
                                        </div>
                                        <span class="absolute bottom-5 left-5 bg-[#FFFDFC] p-[5px] rounded-[2px] text-secondary leading-none text-[14px] font-normal capitalize">for Rent</span>
                                    </div>

                                    <div class="py-[20px] px-[20px]">
                                        <h3><a href="properties-details.html" class="font-recoleta leading-tight text-[22px] xl:text-lg text-primary">Sinomen Studio Palace.</a></h3>
                                        <h4><a href="properties-details.html" class="font-light text-tiny text-secondary underline">4658 Oakwood Avenue, New York</a></h4>
                                        <span class="font-light text-sm">Added: 25 November, 2021</span>
                                        <div class="before:block before:absolute before:top-1/2 before:-translate-y-1/2 before:h-[1px] before:w-full before:z-[-1] before:bg-[#E0E0E0] relative"><span class="font-recoleta text-base text-primary px-[15px] bg-white">Price: $255300</span></div>
                                        <p class="font-light">1230 Sq.fit - 4 Bed - 3 Bath - 2 Garage</p>
                                    </div>
                                </div>

                            </div>
                        </div>

                        <div id="ForSale" class="properties-tab-content">
                            <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-[30px]">

                                <div class="overflow-hidden rounded-md drop-shadow-[0px_2px_15px_rgba(0,0,0,0.1)] bg-[#FFFDFC] text-center transition-all duration-300 hover:-translate-y-[10px]">
                                    <div class="relative">
                                        <a href="properties-details.html" class="block">
                                            <img src="/static/images/properties/properties4.jpg" class="w-full h-full" loading="lazy" width="370" height="266" alt="Elite Garden Resedence.">
                                        </a>
                                        <div class="flex flex-wrap flex-col absolute top-5 right-5">
                                            <button class="flex flex-wrap items-center bg-[rgb(1,97,78,0.8)] p-[5px] rounded-[2px] text-white mb-[5px] text-xs"><img class="mr-1" src="/static/images/icon/camera.png" loading="lazy" width="13" height="10" alt="camera icon">07</button>
                                            <button class="flex flex-wrap items-center bg-[rgb(1,97,78,0.8)] p-[5px] rounded-[2px] text-white text-xs"><img class="mr-1" src="/static/images/icon/video.png" loading="lazy" width="14" height="10" alt="camera icon">08</button>
                                        </div>
                                        <span class="absolute bottom-5 left-5 bg-[#FFFDFC] p-[5px] rounded-[2px] text-secondary leading-none text-[14px] font-normal capitalize">for Sale</span>
                                    </div>

                                    <div class="py-[20px] px-[20px]">
                                        <h3><a href="properties-details.html" class="font-recoleta leading-tight text-[22px] xl:text-lg text-primary">Elite Garden Resedence.</a></h3>
                                        <h4><a href="properties-details.html" class="font-light text-tiny text-secondary underline">253 Montril Street, South Town, Miami</a></h4>
                                        <span class="font-light text-sm">Added: 25 November, 2021</span>
                                        <div class="before:block before:absolute before:top-1/2 before:-translate-y-1/2 before:h-[1px] before:w-full before:z-[-1] before:bg-[#E0E0E0] relative"><span class="font-recoleta text-base text-primary px-[15px] bg-white">Price: $255300</span></div>
                                        <p class="font-light">1230 Sq.fit - 4 Bed - 3 Bath - 2 Garage</p>
                                    </div>
                                </div>
                                <div class="overflow-hidden rounded-md drop-shadow-[0px_2px_15px_rgba(0,0,0,0.1)] bg-[#FFFDFC] text-center transition-all duration-300 hover:-translate-y-[10px]">
                                    <div class="relative">
                                        <a href="properties-details.html" class="block">
                                            <img src="/static/images/properties/properties6.jpg" class="w-full h-full" loading="lazy" width="370" height="266" alt="De Parasiya Appartment.">
                                        </a>
                                        <div class="flex flex-wrap flex-col absolute top-5 right-5">
                                            <button class="flex flex-wrap items-center bg-[rgb(1,97,78,0.8)] p-[5px] rounded-[2px] text-white mb-[5px] text-xs"><img class="mr-1" src="/static/images/icon/camera.png" loading="lazy" width="13" height="10" alt="camera icon">07</button>
                                            <button class="flex flex-wrap items-center bg-[rgb(1,97,78,0.8)] p-[5px] rounded-[2px] text-white text-xs"><img class="mr-1" src="/static/images/icon/video.png" loading="lazy" width="14" height="10" alt="camera icon">08</button>
                                        </div>
                                        <span class="absolute bottom-5 left-5 bg-[#FFFDFC] p-[5px] rounded-[2px] text-secondary leading-none text-[14px] font-normal capitalize">for Sale</span>
                                    </div>

                                    <div class="py-[20px] px-[20px]">
                                        <h3><a href="properties-details.html" class="font-recoleta leading-tight text-[22px] xl:text-lg text-primary">De Parasiya Appartment.</a></h3>
                                        <h4><a href="properties-details.html" class="font-light text-tiny text-secondary underline">18B Central Street, San Francisco</a></h4>
                                        <span class="font-light text-sm">Added: 25 November, 2021</span>
                                        <div class="before:block before:absolute before:top-1/2 before:-translate-y-1/2 before:h-[1px] before:w-full before:z-[-1] before:bg-[#E0E0E0] relative"><span class="font-recoleta text-base text-primary px-[15px] bg-white">Price: $255300</span></div>
                                        <p class="font-light">1800 Sq.fit - 5 Bed - 3 Bath - 2 Garage</p>
                                    </div>
                                </div>
                                <div class="overflow-hidden rounded-md drop-shadow-[0px_2px_15px_rgba(0,0,0,0.1)] bg-[#FFFDFC] text-center transition-all duration-300 hover:-translate-y-[10px]">
                                    <div class="relative">
                                        <a href="properties-details.html" class="block">
                                            <img src="/static/images/properties/properties5.jpg" class="w-full h-full" loading="lazy" width="370" height="266" alt="Duplex de Villa.">
                                        </a>
                                        <div class="flex flex-wrap flex-col absolute top-5 right-5">
                                            <button class="flex flex-wrap items-center bg-[rgb(1,97,78,0.8)] p-[5px] rounded-[2px] text-white mb-[5px] text-xs"><img class="mr-1" src="/static/images/icon/camera.png" loading="lazy" width="13" height="10" alt="camera icon">07</button>
                                            <button class="flex flex-wrap items-center bg-[rgb(1,97,78,0.8)] p-[5px] rounded-[2px] text-white text-xs"><img class="mr-1" src="/static/images/icon/video.png" loading="lazy" width="14" height="10" alt="camera icon">08</button>
                                        </div>
                                        <span class="absolute bottom-5 left-5 bg-[#FFFDFC] p-[5px] rounded-[2px] text-secondary leading-none text-[14px] font-normal capitalize">for Rent</span>
                                    </div>

                                    <div class="py-[20px] px-[20px]">
                                        <h3><a href="properties-details.html" class="font-recoleta leading-tight text-[22px] xl:text-lg text-primary">Duplex de Villa.</a></h3>
                                        <h4><a href="properties-details.html" class="font-light text-tiny text-secondary underline">194 Mercer Street, 627 Broadway, New York</a></h4>
                                        <span class="font-light text-sm">Added: 25 November, 2021</span>
                                        <div class="before:block before:absolute before:top-1/2 before:-translate-y-1/2 before:h-[1px] before:w-full before:z-[-1] before:bg-[#E0E0E0] relative"><span class="font-recoleta text-base text-primary px-[15px] bg-white">Price: $255300</span></div>
                                        <p class="font-light">1800 Sq.fit - 5 Bed - 3 Bath - 2 Garage</p>
                                    </div>
                                </div>
                                <div class="overflow-hidden rounded-md drop-shadow-[0px_2px_15px_rgba(0,0,0,0.1)] bg-[#FFFDFC] text-center transition-all duration-300 hover:-translate-y-[10px]">
                                    <div class="relative">
                                        <a href="properties-details.html" class="block">
                                            <img src="/static/images/properties/properties7.jpg" class="w-full h-full" loading="lazy" width="370" height="266" alt="Orchid Casel de Paradise.">
                                        </a>
                                        <div class="flex flex-wrap flex-col absolute top-5 right-5">
                                            <button class="flex flex-wrap items-center bg-[rgb(1,97,78,0.8)] p-[5px] rounded-[2px] text-white mb-[5px] text-xs"><img class="mr-1" src="/static/images/icon/camera.png" loading="lazy" width="13" height="10" alt="camera icon">07</button>
                                            <button class="flex flex-wrap items-center bg-[rgb(1,97,78,0.8)] p-[5px] rounded-[2px] text-white text-xs"><img class="mr-1" src="/static/images/icon/video.png" loading="lazy" width="14" height="10" alt="camera icon">08</button>
                                        </div>
                                        <span class="absolute bottom-5 left-5 bg-[#FFFDFC] p-[5px] rounded-[2px] text-secondary leading-none text-[14px] font-normal capitalize">for Sale</span>
                                    </div>

                                    <div class="py-[20px] px-[20px]">
                                        <h3><a href="properties-details.html" class="font-recoleta leading-tight text-[22px] xl:text-lg text-primary">Orchid Casel de Paradise.</a></h3>
                                        <h4><a href="properties-details.html" class="font-light text-tiny text-secondary underline">2846 West Side Avenue, New Jersey</a></h4>
                                        <span class="font-light text-sm">Added: 25 November, 2021</span>
                                        <div class="before:block before:absolute before:top-1/2 before:-translate-y-1/2 before:h-[1px] before:w-full before:z-[-1] before:bg-[#E0E0E0] relative"><span class="font-recoleta text-base text-primary px-[15px] bg-white">Price: $255300</span></div>
                                        <p class="font-light">1230 Sq.fit - 4 Bed - 3 Bath - 2 Garage</p>
                                    </div>
                                </div>
                                <div class="overflow-hidden rounded-md drop-shadow-[0px_2px_15px_rgba(0,0,0,0.1)] bg-[#FFFDFC] text-center transition-all duration-300 hover:-translate-y-[10px]">
                                    <div class="relative">
                                        <a href="properties-details.html" class="block">
                                            <img src="/static/images/properties/properties3.jpg" class="w-full h-full" loading="lazy" width="370" height="266" alt="Ruposibangla de parlosia.">
                                        </a>
                                        <div class="flex flex-wrap flex-col absolute top-5 right-5">
                                            <button class="flex flex-wrap items-center bg-[rgb(1,97,78,0.8)] p-[5px] rounded-[2px] text-white mb-[5px] text-xs"><img class="mr-1" src="/static/images/icon/camera.png" loading="lazy" width="13" height="10" alt="camera icon">07</button>
                                            <button class="flex flex-wrap items-center bg-[rgb(1,97,78,0.8)] p-[5px] rounded-[2px] text-white text-xs"><img class="mr-1" src="/static/images/icon/video.png" loading="lazy" width="14" height="10" alt="camera icon">08</button>
                                        </div>
                                        <span class="absolute bottom-5 left-5 bg-[#FFFDFC] p-[5px] rounded-[2px] text-secondary leading-none text-[14px] font-normal capitalize">for Sale</span>
                                    </div>

                                    <div class="py-[20px] px-[20px]">
                                        <h3><a href="properties-details.html" class="font-recoleta leading-tight text-[22px] xl:text-lg text-primary">Ruposibangla de parlosia.</a></h3>
                                        <h4><a href="properties-details.html" class="font-light text-tiny text-secondary underline">2381 Richards Avenue, Stockton, California</a></h4>
                                        <span class="font-light text-sm">Added: 25 November, 2021</span>
                                        <div class="before:block before:absolute before:top-1/2 before:-translate-y-1/2 before:h-[1px] before:w-full before:z-[-1] before:bg-[#E0E0E0] relative"><span class="font-recoleta text-base text-primary px-[15px] bg-white">Price: $255300</span></div>
                                        <p class="font-light">1230 Sq.fit - 4 Bed - 3 Bath - 2 Garage</p>
                                    </div>
                                </div>
                                <div class="overflow-hidden rounded-md drop-shadow-[0px_2px_15px_rgba(0,0,0,0.1)] bg-[#FFFDFC] text-center transition-all duration-300 hover:-translate-y-[10px]">
                                    <div class="relative">
                                        <a href="properties-details.html" class="block">
                                            <img src="/static/images/properties/properties1.jpg" class="w-full h-full" loading="lazy" width="370" height="266" alt="Sinomen Studio Palace.">
                                        </a>
                                        <div class="flex flex-wrap flex-col absolute top-5 right-5">
                                            <button class="flex flex-wrap items-center bg-[rgb(1,97,78,0.8)] p-[5px] rounded-[2px] text-white mb-[5px] text-xs"><img class="mr-1" src="/static/images/icon/camera.png" loading="lazy" width="13" height="10" alt="camera icon">07</button>
                                            <button class="flex flex-wrap items-center bg-[rgb(1,97,78,0.8)] p-[5px] rounded-[2px] text-white text-xs"><img class="mr-1" src="/static/images/icon/video.png" loading="lazy" width="14" height="10" alt="camera icon">08</button>
                                        </div>
                                        <span class="absolute bottom-5 left-5 bg-[#FFFDFC] p-[5px] rounded-[2px] text-secondary leading-none text-[14px] font-normal capitalize">for Rent</span>
                                    </div>

                                    <div class="py-[20px] px-[20px]">
                                        <h3><a href="properties-details.html" class="font-recoleta leading-tight text-[22px] xl:text-lg text-primary">Sinomen Studio Palace.</a></h3>
                                        <h4><a href="properties-details.html" class="font-light text-tiny text-secondary underline">4658 Oakwood Avenue, New York</a></h4>
                                        <span class="font-light text-sm">Added: 25 November, 2021</span>
                                        <div class="before:block before:absolute before:top-1/2 before:-translate-y-1/2 before:h-[1px] before:w-full before:z-[-1] before:bg-[#E0E0E0] relative"><span class="font-recoleta text-base text-primary px-[15px] bg-white">Price: $255300</span></div>
                                        <p class="font-light">1230 Sq.fit - 4 Bed - 3 Bath - 2 Garage</p>
                                    </div>
                                </div>

                            </div>
                        </div>
                        <div id="ForRent" class="properties-tab-content">
                            <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-[30px]">

                                <div class="overflow-hidden rounded-md drop-shadow-[0px_2px_15px_rgba(0,0,0,0.1)] bg-[#FFFDFC] text-center transition-all duration-300 hover:-translate-y-[10px]">
                                    <div class="relative">
                                        <a href="properties-details.html" class="block">
                                            <img src="/static/images/properties/properties5.jpg" class="w-full h-full" loading="lazy" width="370" height="266" alt="Elite Garden Resedence.">
                                        </a>
                                        <div class="flex flex-wrap flex-col absolute top-5 right-5">
                                            <button class="flex flex-wrap items-center bg-[rgb(1,97,78,0.8)] p-[5px] rounded-[2px] text-white mb-[5px] text-xs"><img class="mr-1" src="/static/images/icon/camera.png" loading="lazy" width="13" height="10" alt="camera icon">07</button>
                                            <button class="flex flex-wrap items-center bg-[rgb(1,97,78,0.8)] p-[5px] rounded-[2px] text-white text-xs"><img class="mr-1" src="/static/images/icon/video.png" loading="lazy" width="14" height="10" alt="camera icon">08</button>
                                        </div>
                                        <span class="absolute bottom-5 left-5 bg-[#FFFDFC] p-[5px] rounded-[2px] text-secondary leading-none text-[14px] font-normal capitalize">for Sale</span>
                                    </div>

                                    <div class="py-[20px] px-[20px]">
                                        <h3><a href="properties-details.html" class="font-recoleta leading-tight text-[22px] xl:text-lg text-primary">Elite Garden Resedence.</a></h3>
                                        <h4><a href="properties-details.html" class="font-light text-tiny text-secondary underline">253 Montril Street, South Town, Miami</a></h4>
                                        <span class="font-light text-sm">Added: 25 November, 2021</span>
                                        <div class="before:block before:absolute before:top-1/2 before:-translate-y-1/2 before:h-[1px] before:w-full before:z-[-1] before:bg-[#E0E0E0] relative"><span class="font-recoleta text-base text-primary px-[15px] bg-white">Price: $255300</span></div>
                                        <p class="font-light">1230 Sq.fit - 4 Bed - 3 Bath - 2 Garage</p>
                                    </div>
                                </div>
                                <div class="overflow-hidden rounded-md drop-shadow-[0px_2px_15px_rgba(0,0,0,0.1)] bg-[#FFFDFC] text-center transition-all duration-300 hover:-translate-y-[10px]">
                                    <div class="relative">
                                        <a href="properties-details.html" class="block">
                                            <img src="/static/images/properties/properties7.jpg" class="w-full h-full" loading="lazy" width="370" height="266" alt="De Parasiya Appartment.">
                                        </a>
                                        <div class="flex flex-wrap flex-col absolute top-5 right-5">
                                            <button class="flex flex-wrap items-center bg-[rgb(1,97,78,0.8)] p-[5px] rounded-[2px] text-white mb-[5px] text-xs"><img class="mr-1" src="/static/images/icon/camera.png" loading="lazy" width="13" height="10" alt="camera icon">07</button>
                                            <button class="flex flex-wrap items-center bg-[rgb(1,97,78,0.8)] p-[5px] rounded-[2px] text-white text-xs"><img class="mr-1" src="/static/images/icon/video.png" loading="lazy" width="14" height="10" alt="camera icon">08</button>
                                        </div>
                                        <span class="absolute bottom-5 left-5 bg-[#FFFDFC] p-[5px] rounded-[2px] text-secondary leading-none text-[14px] font-normal capitalize">for Rent</span>
                                    </div>

                                    <div class="py-[20px] px-[20px]">
                                        <h3><a href="properties-details.html" class="font-recoleta leading-tight text-[22px] xl:text-lg text-primary">De Parasiya Appartment.</a></h3>
                                        <h4><a href="properties-details.html" class="font-light text-tiny text-secondary underline">18B Central Street, San Francisco</a></h4>
                                        <span class="font-light text-sm">Added: 25 November, 2021</span>
                                        <div class="before:block before:absolute before:top-1/2 before:-translate-y-1/2 before:h-[1px] before:w-full before:z-[-1] before:bg-[#E0E0E0] relative"><span class="font-recoleta text-base text-primary px-[15px] bg-white">Price: $255300</span></div>
                                        <p class="font-light">1800 Sq.fit - 5 Bed - 3 Bath - 2 Garage</p>
                                    </div>
                                </div>
                                <div class="overflow-hidden rounded-md drop-shadow-[0px_2px_15px_rgba(0,0,0,0.1)] bg-[#FFFDFC] text-center transition-all duration-300 hover:-translate-y-[10px]">
                                    <div class="relative">
                                        <a href="properties-details.html" class="block">
                                            <img src="/static/images/properties/properties6.jpg" class="w-full h-full" loading="lazy" width="370" height="266" alt="Duplex de Villa.">
                                        </a>
                                        <div class="flex flex-wrap flex-col absolute top-5 right-5">
                                            <button class="flex flex-wrap items-center bg-[rgb(1,97,78,0.8)] p-[5px] rounded-[2px] text-white mb-[5px] text-xs"><img class="mr-1" src="/static/images/icon/camera.png" loading="lazy" width="13" height="10" alt="camera icon">07</button>
                                            <button class="flex flex-wrap items-center bg-[rgb(1,97,78,0.8)] p-[5px] rounded-[2px] text-white text-xs"><img class="mr-1" src="/static/images/icon/video.png" loading="lazy" width="14" height="10" alt="camera icon">08</button>
                                        </div>
                                        <span class="absolute bottom-5 left-5 bg-[#FFFDFC] p-[5px] rounded-[2px] text-secondary leading-none text-[14px] font-normal capitalize">for Sale</span>
                                    </div>

                                    <div class="py-[20px] px-[20px]">
                                        <h3><a href="properties-details.html" class="font-recoleta leading-tight text-[22px] xl:text-lg text-primary">Duplex de Villa.</a></h3>
                                        <h4><a href="properties-details.html" class="font-light text-tiny text-secondary underline">194 Mercer Street, 627 Broadway, New York</a></h4>
                                        <span class="font-light text-sm">Added: 25 November, 2021</span>
                                        <div class="before:block before:absolute before:top-1/2 before:-translate-y-1/2 before:h-[1px] before:w-full before:z-[-1] before:bg-[#E0E0E0] relative"><span class="font-recoleta text-base text-primary px-[15px] bg-white">Price: $255300</span></div>
                                        <p class="font-light">1800 Sq.fit - 5 Bed - 3 Bath - 2 Garage</p>
                                    </div>
                                </div>
                                <div class="overflow-hidden rounded-md drop-shadow-[0px_2px_15px_rgba(0,0,0,0.1)] bg-[#FFFDFC] text-center transition-all duration-300 hover:-translate-y-[10px]">
                                    <div class="relative">
                                        <a href="properties-details.html" class="block">
                                            <img src="/static/images/properties/properties8.jpg" class="w-full h-full" loading="lazy" width="370" height="266" alt="Orchid Casel de Paradise.">
                                        </a>
                                        <div class="flex flex-wrap flex-col absolute top-5 right-5">
                                            <button class="flex flex-wrap items-center bg-[rgb(1,97,78,0.8)] p-[5px] rounded-[2px] text-white mb-[5px] text-xs"><img class="mr-1" src="/static/images/icon/camera.png" loading="lazy" width="13" height="10" alt="camera icon">07</button>
                                            <button class="flex flex-wrap items-center bg-[rgb(1,97,78,0.8)] p-[5px] rounded-[2px] text-white text-xs"><img class="mr-1" src="/static/images/icon/video.png" loading="lazy" width="14" height="10" alt="camera icon">08</button>
                                        </div>
                                        <span class="absolute bottom-5 left-5 bg-[#FFFDFC] p-[5px] rounded-[2px] text-secondary leading-none text-[14px] font-normal capitalize">for Sale</span>
                                    </div>

                                    <div class="py-[20px] px-[20px]">
                                        <h3><a href="properties-details.html" class="font-recoleta leading-tight text-[22px] xl:text-lg text-primary">Orchid Casel de Paradise.</a></h3>
                                        <h4><a href="properties-details.html" class="font-light text-tiny text-secondary underline">2846 West Side Avenue, New Jersey</a></h4>
                                        <span class="font-light text-sm">Added: 25 November, 2021</span>
                                        <div class="before:block before:absolute before:top-1/2 before:-translate-y-1/2 before:h-[1px] before:w-full before:z-[-1] before:bg-[#E0E0E0] relative"><span class="font-recoleta text-base text-primary px-[15px] bg-white">Price: $255300</span></div>
                                        <p class="font-light">1230 Sq.fit - 4 Bed - 3 Bath - 2 Garage</p>
                                    </div>
                                </div>
                                <div class="overflow-hidden rounded-md drop-shadow-[0px_2px_15px_rgba(0,0,0,0.1)] bg-[#FFFDFC] text-center transition-all duration-300 hover:-translate-y-[10px]">
                                    <div class="relative">
                                        <a href="properties-details.html" class="block">
                                            <img src="/static/images/properties/properties3.jpg" class="w-full h-full" loading="lazy" width="370" height="266" alt="Ruposibangla de parlosia.">
                                        </a>
                                        <div class="flex flex-wrap flex-col absolute top-5 right-5">
                                            <button class="flex flex-wrap items-center bg-[rgb(1,97,78,0.8)] p-[5px] rounded-[2px] text-white mb-[5px] text-xs"><img class="mr-1" src="/static/images/icon/camera.png" loading="lazy" width="13" height="10" alt="camera icon">07</button>
                                            <button class="flex flex-wrap items-center bg-[rgb(1,97,78,0.8)] p-[5px] rounded-[2px] text-white text-xs"><img class="mr-1" src="/static/images/icon/video.png" loading="lazy" width="14" height="10" alt="camera icon">08</button>
                                        </div>
                                        <span class="absolute bottom-5 left-5 bg-[#FFFDFC] p-[5px] rounded-[2px] text-secondary leading-none text-[14px] font-normal capitalize">for Sale</span>
                                    </div>

                                    <div class="py-[20px] px-[20px]">
                                        <h3><a href="properties-details.html" class="font-recoleta leading-tight text-[22px] xl:text-lg text-primary">Ruposibangla de parlosia.</a></h3>
                                        <h4><a href="properties-details.html" class="font-light text-tiny text-secondary underline">2381 Richards Avenue, Stockton, California</a></h4>
                                        <span class="font-light text-sm">Added: 25 November, 2021</span>
                                        <div class="before:block before:absolute before:top-1/2 before:-translate-y-1/2 before:h-[1px] before:w-full before:z-[-1] before:bg-[#E0E0E0] relative"><span class="font-recoleta text-base text-primary px-[15px] bg-white">Price: $255300</span></div>
                                        <p class="font-light">1230 Sq.fit - 4 Bed - 3 Bath - 2 Garage</p>
                                    </div>
                                </div>
                                <div class="overflow-hidden rounded-md drop-shadow-[0px_2px_15px_rgba(0,0,0,0.1)] bg-[#FFFDFC] text-center transition-all duration-300 hover:-translate-y-[10px]">
                                    <div class="relative">
                                        <a href="properties-details.html" class="block">
                                            <img src="/static/images/properties/properties1.jpg" class="w-full h-full" loading="lazy" width="370" height="266" alt="Sinomen Studio Palace.">
                                        </a>
                                        <div class="flex flex-wrap flex-col absolute top-5 right-5">
                                            <button class="flex flex-wrap items-center bg-[rgb(1,97,78,0.8)] p-[5px] rounded-[2px] text-white mb-[5px] text-xs"><img class="mr-1" src="/static/images/icon/camera.png" loading="lazy" width="13" height="10" alt="camera icon">07</button>
                                            <button class="flex flex-wrap items-center bg-[rgb(1,97,78,0.8)] p-[5px] rounded-[2px] text-white text-xs"><img class="mr-1" src="/static/images/icon/video.png" loading="lazy" width="14" height="10" alt="camera icon">08</button>
                                        </div>
                                        <span class="absolute bottom-5 left-5 bg-[#FFFDFC] p-[5px] rounded-[2px] text-secondary leading-none text-[14px] font-normal capitalize">for Rent</span>
                                    </div>

                                    <div class="py-[20px] px-[20px]">
                                        <h3><a href="properties-details.html" class="font-recoleta leading-tight text-[22px] xl:text-lg text-primary">Sinomen Studio Palace.</a></h3>
                                        <h4><a href="properties-details.html" class="font-light text-tiny text-secondary underline">4658 Oakwood Avenue, New York</a></h4>
                                        <span class="font-light text-sm">Added: 25 November, 2021</span>
                                        <div class="before:block before:absolute before:top-1/2 before:-translate-y-1/2 before:h-[1px] before:w-full before:z-[-1] before:bg-[#E0E0E0] relative"><span class="font-recoleta text-base text-primary px-[15px] bg-white">Price: $255300</span></div>
                                        <p class="font-light">1230 Sq.fit - 4 Bed - 3 Bath - 2 Garage</p>
                                    </div>
                                </div>

                            </div>
                        </div>
                        <div id="co-living2" class="properties-tab-content">
                            <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-[30px]">

                                <div class="overflow-hidden rounded-md drop-shadow-[0px_2px_15px_rgba(0,0,0,0.1)] bg-[#FFFDFC] text-center transition-all duration-300 hover:-translate-y-[10px]">
                                    <div class="relative">
                                        <a href="properties-details.html" class="block">
                                            <img src="/static/images/properties/properties7.jpg" class="w-full h-full" loading="lazy" width="370" height="266" alt="Elite Garden Resedence.">
                                        </a>
                                        <div class="flex flex-wrap flex-col absolute top-5 right-5">
                                            <button class="flex flex-wrap items-center bg-[rgb(1,97,78,0.8)] p-[5px] rounded-[2px] text-white mb-[5px] text-xs"><img class="mr-1" src="/static/images/icon/camera.png" loading="lazy" width="13" height="10" alt="camera icon">07</button>
                                            <button class="flex flex-wrap items-center bg-[rgb(1,97,78,0.8)] p-[5px] rounded-[2px] text-white text-xs"><img class="mr-1" src="/static/images/icon/video.png" loading="lazy" width="14" height="10" alt="camera icon">08</button>
                                        </div>
                                        <span class="absolute bottom-5 left-5 bg-[#FFFDFC] p-[5px] rounded-[2px] text-secondary leading-none text-[14px] font-normal capitalize">for Sale</span>
                                    </div>

                                    <div class="py-[20px] px-[20px]">
                                        <h3><a href="properties-details.html" class="font-recoleta leading-tight text-[22px] xl:text-lg text-primary">Elite Garden Resedence.</a></h3>
                                        <h4><a href="properties-details.html" class="font-light text-tiny text-secondary underline">253 Montril Street, South Town, Miami</a></h4>
                                        <span class="font-light text-sm">Added: 25 November, 2021</span>
                                        <div class="before:block before:absolute before:top-1/2 before:-translate-y-1/2 before:h-[1px] before:w-full before:z-[-1] before:bg-[#E0E0E0] relative"><span class="font-recoleta text-base text-primary px-[15px] bg-white">Price: $255300</span></div>
                                        <p class="font-light">1230 Sq.fit - 4 Bed - 3 Bath - 2 Garage</p>
                                    </div>
                                </div>
                                <div class="overflow-hidden rounded-md drop-shadow-[0px_2px_15px_rgba(0,0,0,0.1)] bg-[#FFFDFC] text-center transition-all duration-300 hover:-translate-y-[10px]">
                                    <div class="relative">
                                        <a href="properties-details.html" class="block">
                                            <img src="/static/images/properties/properties5.jpg" class="w-full h-full" loading="lazy" width="370" height="266" alt="De Parasiya Appartment.">
                                        </a>
                                        <div class="flex flex-wrap flex-col absolute top-5 right-5">
                                            <button class="flex flex-wrap items-center bg-[rgb(1,97,78,0.8)] p-[5px] rounded-[2px] text-white mb-[5px] text-xs"><img class="mr-1" src="/static/images/icon/camera.png" loading="lazy" width="13" height="10" alt="camera icon">07</button>
                                            <button class="flex flex-wrap items-center bg-[rgb(1,97,78,0.8)] p-[5px] rounded-[2px] text-white text-xs"><img class="mr-1" src="/static/images/icon/video.png" loading="lazy" width="14" height="10" alt="camera icon">08</button>
                                        </div>
                                        <span class="absolute bottom-5 left-5 bg-[#FFFDFC] p-[5px] rounded-[2px] text-secondary leading-none text-[14px] font-normal capitalize">for Sale</span>
                                    </div>

                                    <div class="py-[20px] px-[20px]">
                                        <h3><a href="properties-details.html" class="font-recoleta leading-tight text-[22px] xl:text-lg text-primary">De Parasiya Appartment.</a></h3>
                                        <h4><a href="properties-details.html" class="font-light text-tiny text-secondary underline">18B Central Street, San Francisco</a></h4>
                                        <span class="font-light text-sm">Added: 25 November, 2021</span>
                                        <div class="before:block before:absolute before:top-1/2 before:-translate-y-1/2 before:h-[1px] before:w-full before:z-[-1] before:bg-[#E0E0E0] relative"><span class="font-recoleta text-base text-primary px-[15px] bg-white">Price: $255300</span></div>
                                        <p class="font-light">1800 Sq.fit - 5 Bed - 3 Bath - 2 Garage</p>
                                    </div>
                                </div>
                                <div class="overflow-hidden rounded-md drop-shadow-[0px_2px_15px_rgba(0,0,0,0.1)] bg-[#FFFDFC] text-center transition-all duration-300 hover:-translate-y-[10px]">
                                    <div class="relative">
                                        <a href="properties-details.html" class="block">
                                            <img src="/static/images/properties/properties6.jpg" class="w-full h-full" loading="lazy" width="370" height="266" alt="Duplex de Villa.">
                                        </a>
                                        <div class="flex flex-wrap flex-col absolute top-5 right-5">
                                            <button class="flex flex-wrap items-center bg-[rgb(1,97,78,0.8)] p-[5px] rounded-[2px] text-white mb-[5px] text-xs"><img class="mr-1" src="/static/images/icon/camera.png" loading="lazy" width="13" height="10" alt="camera icon">07</button>
                                            <button class="flex flex-wrap items-center bg-[rgb(1,97,78,0.8)] p-[5px] rounded-[2px] text-white text-xs"><img class="mr-1" src="/static/images/icon/video.png" loading="lazy" width="14" height="10" alt="camera icon">08</button>
                                        </div>
                                        <span class="absolute bottom-5 left-5 bg-[#FFFDFC] p-[5px] rounded-[2px] text-secondary leading-none text-[14px] font-normal capitalize">for Rent</span>
                                    </div>

                                    <div class="py-[20px] px-[20px]">
                                        <h3><a href="properties-details.html" class="font-recoleta leading-tight text-[22px] xl:text-lg text-primary">Duplex de Villa.</a></h3>
                                        <h4><a href="properties-details.html" class="font-light text-tiny text-secondary underline">194 Mercer Street, 627 Broadway, New York</a></h4>
                                        <span class="font-light text-sm">Added: 25 November, 2021</span>
                                        <div class="before:block before:absolute before:top-1/2 before:-translate-y-1/2 before:h-[1px] before:w-full before:z-[-1] before:bg-[#E0E0E0] relative"><span class="font-recoleta text-base text-primary px-[15px] bg-white">Price: $255300</span></div>
                                        <p class="font-light">1800 Sq.fit - 5 Bed - 3 Bath - 2 Garage</p>
                                    </div>
                                </div>
                                <div class="overflow-hidden rounded-md drop-shadow-[0px_2px_15px_rgba(0,0,0,0.1)] bg-[#FFFDFC] text-center transition-all duration-300 hover:-translate-y-[10px]">
                                    <div class="relative">
                                        <a href="properties-details.html" class="block">
                                            <img src="/static/images/properties/properties8.jpg" class="w-full h-full" loading="lazy" width="370" height="266" alt="Orchid Casel de Paradise.">
                                        </a>
                                        <div class="flex flex-wrap flex-col absolute top-5 right-5">
                                            <button class="flex flex-wrap items-center bg-[rgb(1,97,78,0.8)] p-[5px] rounded-[2px] text-white mb-[5px] text-xs"><img class="mr-1" src="/static/images/icon/camera.png" loading="lazy" width="13" height="10" alt="camera icon">07</button>
                                            <button class="flex flex-wrap items-center bg-[rgb(1,97,78,0.8)] p-[5px] rounded-[2px] text-white text-xs"><img class="mr-1" src="/static/images/icon/video.png" loading="lazy" width="14" height="10" alt="camera icon">08</button>
                                        </div>
                                        <span class="absolute bottom-5 left-5 bg-[#FFFDFC] p-[5px] rounded-[2px] text-secondary leading-none text-[14px] font-normal capitalize">for Sale</span>
                                    </div>

                                    <div class="py-[20px] px-[20px]">
                                        <h3><a href="properties-details.html" class="font-recoleta leading-tight text-[22px] xl:text-lg text-primary">Orchid Casel de Paradise.</a></h3>
                                        <h4><a href="properties-details.html" class="font-light text-tiny text-secondary underline">2846 West Side Avenue, New Jersey</a></h4>
                                        <span class="font-light text-sm">Added: 25 November, 2021</span>
                                        <div class="before:block before:absolute before:top-1/2 before:-translate-y-1/2 before:h-[1px] before:w-full before:z-[-1] before:bg-[#E0E0E0] relative"><span class="font-recoleta text-base text-primary px-[15px] bg-white">Price: $255300</span></div>
                                        <p class="font-light">1230 Sq.fit - 4 Bed - 3 Bath - 2 Garage</p>
                                    </div>
                                </div>
                                <div class="overflow-hidden rounded-md drop-shadow-[0px_2px_15px_rgba(0,0,0,0.1)] bg-[#FFFDFC] text-center transition-all duration-300 hover:-translate-y-[10px]">
                                    <div class="relative">
                                        <a href="properties-details.html" class="block">
                                            <img src="/static/images/properties/properties3.jpg" class="w-full h-full" loading="lazy" width="370" height="266" alt="Ruposibangla de parlosia.">
                                        </a>
                                        <div class="flex flex-wrap flex-col absolute top-5 right-5">
                                            <button class="flex flex-wrap items-center bg-[rgb(1,97,78,0.8)] p-[5px] rounded-[2px] text-white mb-[5px] text-xs"><img class="mr-1" src="/static/images/icon/camera.png" loading="lazy" width="13" height="10" alt="camera icon">07</button>
                                            <button class="flex flex-wrap items-center bg-[rgb(1,97,78,0.8)] p-[5px] rounded-[2px] text-white text-xs"><img class="mr-1" src="/static/images/icon/video.png" loading="lazy" width="14" height="10" alt="camera icon">08</button>
                                        </div>
                                        <span class="absolute bottom-5 left-5 bg-[#FFFDFC] p-[5px] rounded-[2px] text-secondary leading-none text-[14px] font-normal capitalize">for Sale</span>
                                    </div>

                                    <div class="py-[20px] px-[20px]">
                                        <h3><a href="properties-details.html" class="font-recoleta leading-tight text-[22px] xl:text-lg text-primary">Ruposibangla de parlosia.</a></h3>
                                        <h4><a href="properties-details.html" class="font-light text-tiny text-secondary underline">2381 Richards Avenue, Stockton, California</a></h4>
                                        <span class="font-light text-sm">Added: 25 November, 2021</span>
                                        <div class="before:block before:absolute before:top-1/2 before:-translate-y-1/2 before:h-[1px] before:w-full before:z-[-1] before:bg-[#E0E0E0] relative"><span class="font-recoleta text-base text-primary px-[15px] bg-white">Price: $255300</span></div>
                                        <p class="font-light">1230 Sq.fit - 4 Bed - 3 Bath - 2 Garage</p>
                                    </div>
                                </div>
                                <div class="overflow-hidden rounded-md drop-shadow-[0px_2px_15px_rgba(0,0,0,0.1)] bg-[#FFFDFC] text-center transition-all duration-300 hover:-translate-y-[10px]">
                                    <div class="relative">
                                        <a href="properties-details.html" class="block">
                                            <img src="/static/images/properties/properties2.jpg" class="w-full h-full" loading="lazy" width="370" height="266" alt="Sinomen Studio Palace.">
                                        </a>
                                        <div class="flex flex-wrap flex-col absolute top-5 right-5">
                                            <button class="flex flex-wrap items-center bg-[rgb(1,97,78,0.8)] p-[5px] rounded-[2px] text-white mb-[5px] text-xs"><img class="mr-1" src="/static/images/icon/camera.png" loading="lazy" width="13" height="10" alt="camera icon">07</button>
                                            <button class="flex flex-wrap items-center bg-[rgb(1,97,78,0.8)] p-[5px] rounded-[2px] text-white text-xs"><img class="mr-1" src="/static/images/icon/video.png" loading="lazy" width="14" height="10" alt="camera icon">08</button>
                                        </div>
                                        <span class="absolute bottom-5 left-5 bg-[#FFFDFC] p-[5px] rounded-[2px] text-secondary leading-none text-[14px] font-normal capitalize">for Rent</span>
                                    </div>

                                    <div class="py-[20px] px-[20px]">
                                        <h3><a href="properties-details.html" class="font-recoleta leading-tight text-[22px] xl:text-lg text-primary">Sinomen Studio Palace.</a></h3>
                                        <h4><a href="properties-details.html" class="font-light text-tiny text-secondary underline">4658 Oakwood Avenue, New York</a></h4>
                                        <span class="font-light text-sm">Added: 25 November, 2021</span>
                                        <div class="before:block before:absolute before:top-1/2 before:-translate-y-1/2 before:h-[1px] before:w-full before:z-[-1] before:bg-[#E0E0E0] relative"><span class="font-recoleta text-base text-primary px-[15px] bg-white">Price: $255300</span></div>
                                        <p class="font-light">1230 Sq.fit - 4 Bed - 3 Bath - 2 Garage</p>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- Featured Properties End -->

        <a id="scrollUp" class="w-12 h-12 rounded-full bg-primary text-white fixed right-5 bottom-16 flex flex-wrap items-center justify-center transition-all duration-300 z-10" href="#" aria-label="scroll up">

            <svg width="25" height="auto" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
                <path d="M6.101 261.899L25.9 281.698c4.686 4.686 12.284 4.686 16.971 0L198 126.568V468c0 6.627 5.373 12 12 12h28c6.627 0 12-5.373 12-12V126.568l155.13 155.13c4.686 4.686 12.284 4.686 16.971 0l19.799-19.799c4.686-4.686 4.686-12.284 0-16.971L232.485 35.515c-4.686-4.686-12.284-4.686-16.971 0L6.101 244.929c-4.687 4.686-4.687 12.284 0 16.97z" />
            </svg>

        </a>

    </div>



    <!-- JS Vendor, Plugins & Activation Script Files -->

    <!-- Vendors JS -->
    <script src="/static/js/vendor/modernizr-3.11.7.min.js"></script>
    <script src="/static/js/vendor/jquery-3.6.0.min.js"></script>
    <script src="/static/js/vendor/jquery-migrate-3.3.2.min.js"></script>
    <!-- Plugins JS -->

    <script src="/static/js/plugins/popper.min.js"></script>
    <script src="/static/js/plugins/jquery.magnific-popup.min.js"></script>
    <script src="/static/js/plugins/jquery.ajaxchimp.min.js"></script>
    <script src="/static/js/plugins/parallax.min.js"></script>
    <script src="/static/js/plugins/jquery.nice-select.min.js"></script>

    <!-- Activation JS -->
<!--    <script src="/static/js/main.js"></script>-->

</body>

</html>
